Omadus border-collapse

Omadus border-collapse sunnib topeltpiirjooned lahtrite td või lahtrite th HTML tabelis (ja lahtri piirjoone ning tabeli enda vahel) kokkutõmbuma ja nägema välja nagu üks.

Seda omadust rakendatakse ainult tabelitele ja elementidele, millel on display väärtusel table või inline-table. Tavapäraste plokielementide puhul see, kahjuks, ei tööta. Pidage meeles, et rakendada tuleb tabelile, mitte selle lahtritele.

Süntaks

cssselektor {
  border-collapse: collapse | separate;
}

Väärtused

Väärtus	Kirjeldus
`collapse`	Topeltpiirjooned näevad välja nagu üks. On kõrvaltoimeid: omadus `border-spacing` ja atribuut `cellspacing` lakkavad töötamast.
`separate`	Igal tabeli lahtril on oma piirjoon (seetõttu on mõnes kohas piirjooned topelt, kui vahe lahtrite vahel on null).

Vaikeväärtus: separate.

Näide . Väärtus separate

Praegu on tabelis kõik piirjooned topelt (piirjoon on määratud nii lahtritele kui ka tabelile endale):

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;
}

Результат:

Näide . Väärtus separate

Praegu on piirjoon määratud lahtritele, kuid tabelile endale pole määratud. Seal, kus kaks lahtrit jagavad ühist piirjoont, on piirjooned topelt, muudes kohtades - üksikud:

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;
}

Результат:

Näide . Väärtus collapse

Praegu tõmbuvad kõik tabeli piirjooned kokku ja muutuvad näiliselt 1px paksustega, nagu soovitaksegi:

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;
}

Результат: