Vlastnosť border-collapse

Vlastnosť border-collapse spôsobí, že dvojité okraje medzi bunkami td alebo bunkami th HTML tabuľky (a medzi okrajom bunky a samotnej tabuľky) sa zlučujú a vyzerajú ako jeden.

Táto vlastnosť sa aplikuje len na tabuľky a na prvky s display v hodnote table alebo inline-table. Pre obyčajné blokové prvky, žiaľ, nebude fungovať. Majte na pamäti, že aplikovať je potrebné na tabuľku, nie na jej bunky.

Syntax

cssselektor {
  border-collapse: collapse | separate;
}

Hodnoty

Hodnota	Popis
`collapse`	Dvojité okraje budú vyzerať ako jeden. Existujú vedľajšie efekty: prestane fungovať vlastnosť `border-spacing` a atribút `cellspacing`.
`separate`	Každá bunka tabuľky bude mať svoj vlastný okraj (preto na niektorých miestach budú okraje dvojité, ak je medzera medzi bunkami nulová).

Predvolená hodnota: separate.

Príklad . Hodnota separate

Teraz sú v tabuľke všetky okraje dvojité (okraj je nastavený bunkám aj samotnej tabuľke):

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

Результат:

Príklad . Hodnota separate

Teraz je okraj nastavený bunkám, ale samotnej tabuľke nie je nastavený. Tam, kde dve bunky majú spoločný okraj, - okraje budú dvojité, na ostatných miestach - jednoduché:

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

Результат:

Príklad . Hodnota collapse

Teraz sa v tabuľke všetky okraje zlučia a budú vyzerať s hrúbkou 1px, ako sa žiadalo:

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

Результат: