Īpašība border-collapse

Īpašība border-collapse liek dubultajām robežām starp td vai th HTML tabulas šūnām (un starp šūnas robežu un pašas tabulas robežu) savilkties kopā un izskatīties kā vienai.

Šī īpašība tiek lietota tikai tabulām un elementiem ar display ar vērtību table vai inline-table. Parastiem bloka elementiem tā, diemžēl, nestrādās. Ņemiet vērā, ka jālieto tabulai, nevis tās šūnām.

Sintakse

cssselektors {
  border-collapse: collapse | separate;
}

Vērtības

Vērtība	Apraksts
`collapse`	Dubultās robežas izskatīsies kā viena. Ir blakusefekti: pārstās darboties īpašība `border-spacing` un atribūts `cellspacing`.
`separate`	Katra tabulas šūna būs ar savu robežu (tāpēc dažās vietās robežas būs dubultas, ja atstarpe starp šūnām ir nulle).

Noklusējuma vērtība: separate.

Piemērs . Vērtība separate

Šobrīd tabulā visas robežas ir dubultas (robeža ir iestatīta gan šūnām, gan pašai tabulai):

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

Результат:

Piemērs . Vērtība separate

Bet šoreiz robeža ir iestatīta šūnām, bet pašai tabulai nav iestatīta. Tur, kur divām šūnām ir kopīga robeža, - robežas būs dubultas, atlikušajās vietās - vienkāršas:

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

Результат:

Piemērs . Vērtība collapse

Šobrīd tabulā visas robežas savilksies un izskatīsies ar biezumu 1px, kā gribētos:

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

Результат: