Właściwość border-collapse

Właściwość border-collapse powoduje, że podwójne obramowania między komórkami td lub komórkami th HTML tabeli (oraz między obramowaniem komórki a samej tabeli) scalają się i wyglądają jak jedno.

Ta właściwość dotyczy tylko tabel oraz elementów z display o wartości table lub inline-table. Dla zwykłych elementów blokowych, niestety, nie będzie działać. Należy pamiętać, że należy ją zastosować dla tabeli, a nie dla jej komórek.

Składnia

cssselektor {
  border-collapse: collapse | separate;
}

Wartości

Wartość	Opis
`collapse`	Podwójne obramowania będą wyglądać jak jedno. Istnieją efekty uboczne: przestanie działać właściwość `border-spacing` oraz atrybut `cellspacing`.
`separate`	Każda komórka tabeli będzie miała swoje własne obramowanie (dlatego w niektórych miejscach obramowania będą podwójne, jeśli odstęp między komórkami jest zerowy).

Wartość domyślna: separate.

Przykład . Wartość separate

Teraz w tabeli wszystkie obramowania są podwójne (obramowanie nadane zarówno komórkom, jak i samej tabeli):

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Przykład . Wartość separate

A teraz obramowanie nadano komórkom, ale samej tabeli nie nadano. Tam, gdzie dwie komórki mają wspólną granicę, - obramowania będą podwójne, w pozostałych miejscach - pojedyncze:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Przykład . Wartość collapse

Teraz w tabeli wszystkie obramowania scalą się i będą wyglądać na grubości 1px, tak jak byśmy chcieli:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: collapse;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: