Vlastnost border-collapse

Vlastnost border-collapse způsobí, že se dvojité okraje mezi buňkami td nebo buňkami th HTML tabulky (a mezi okrajem buňky a samotné tabulky) sloučí a vypadají jako jeden.

Tato vlastnost se aplikuje pouze na tabulky a na prvky s display s hodnotou table nebo inline-table. U běžných blokových prvků, bohužel, fungovat nebude. Mějte na paměti, že je třeba ji aplikovat na tabulku, nikoli na její buňky.

Syntaxe

cssselektor {
  border-collapse: collapse | separate;
}

Hodnoty

Hodnota	Popis
`collapse`	Dvojité okraje budou vypadat jako jeden. Existují vedlejší efekty: přestane fungovat vlastnost `border-spacing` a atribut `cellspacing`.
`separate`	Každá buňka tabulky bude mít svůj vlastní okraj (proto na některých místech budou okraje dvojité, pokud je mezera mezi buňkami nulová).

Výchozí hodnota: separate.

Příklad . Hodnota separate

Nyní jsou v tabulce všechny okraje dvojité (okraj je nastaven buňkám i samotné tabulce):

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

Результат:

Příklad . Hodnota separate

Nyní je okraj nastaven buňkám, ale samotné tabulce není nastaven. Tam, kde mají dvě buňky společný okraj, - okraje budou dvojité, na ostatních místech - 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;
}

Результат:

Příklad . Hodnota collapse

Nyní se všechny okraje v tabulce sloučí a budou vypadat s tloušťkou 1px, jak bychom chtěli:

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

Результат: