Własność CSS border-collapse

Własność CSS border-collapse decyduje o tym, czy krawędzie obramowania między komórkami tabeli mają być połączone czy rozłączone. Odnosi się ona do elementu table.

Kiedy krawędzie obramowania komórek są rozłączone, to odległość między nimi można ustawiać za pomocą własności border-spacing.

Przykłady

W tym przykładzie sąsiadujące krawędzie komórek tabeli będą rozdzielone:

<style>
table {
  border-collapse: separate;
}
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:

Natomiast w poniższym przykładzie sąsiadujące krawędzie komórek tabeli będą połączone:

<style>
table {
  border: 5px;
  border-collapse: collapse;
}
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-collapse przyjmuje jako wartość jedno z dwóch słów kluczowych:

• collapse: sąsiadujące krawędzie obramowania komórek tabeli będą połączone
• separate: sąsiadujące krawędzie obramowania komórek tabeli będą rozdzielone. To jest wartość domyślna.

Zastosowanie

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

Podsumowanie