Własność CSS border-spacing

Własność CSS border-spacing określa szerokość odstępu między sąsiadującymi krawędziami komórek tabeli, kiedy są rozłączone, tzn. kiedy własność border-collapse elementu table jest ustawiony na separate.

Ta własność, tak jak border-collapse, odnosi się do elementu table. Ponadto jej ustawienie ma zastosowanie także między krawędzią samej tabeli, a krawędziami zawieranych przez nią komórek i wartość ta jest dodawana do dopełnienia tabeli, jeśli jest zdefiniowane.

Przykłady

W tym przykładzie sąsiadujące krawędzie komórek oraz krawędź tabeli i krawędzie komórek będą oddalone od siebie o 20 pikseli:

<style>
table {
  border: 5px solid red;
  border-spacing: 20px;
}
td {
  border: 3px solid green;
  padding: 5px;
}
</style>
...
<table>
  <tr>
    <td>Komórka</td>
    <td>Komórka</td>
  </tr>
  <tr>
    <td>Komórka</td>
    <td>Komórka</td>
  </tr>
</table>

Efekt:

Składnia i wartości

Własność border-spacing przyjmuje jedną lub dwie liczby z jednostką długości:

• Jedna wartość: jeśli podana jest jedna wartość, to ustawia ona jednakową szerokość odstępu między komórkami w pionie i poziomie, np.:

  cell-spacing: 10px;

• Dwie wartości: jeśli podane są dwie wartości, to pierwsza określa szerokość odstępu między komórkami w poziomie, czyli między kolumnami, a druga – między komórkami w pionie, czyli między wierszami, np.:

  cell-spacing: 10px 20px;

Zastosowanie

Własność border-collapse ma zastosowanie do elementu table.