Уласцівасць border-collapse

Уласцівасць border-collapse прымушае падвойныя межы паміж ячэйкамі td ці ячэйкамі th HTML табліцы (і паміж мяжой ячэйкі і самой табліцы) зліцца і выглядаць як адна.

Даная ўласцівасць ужываецца толькі для табліц і для элементаў з display у значэнні table ці inline-table. Для звычайных блачных элементаў яна, на вялікі жаль, працаваць не будзе. Улічвайце, што ўжываць след для табліцы, а не для яе ячаек.

Сінтаксіс

cssселектар {
  border-collapse: collapse | separate;
}

Значэнні

Значэнне	Апісанне
`collapse`	Падвойныя межы будуць выглядаць як адна. Ёсць пабочныя эфекты: перастане працаваць уласцівасць `border-spacing` і атрыбут `cellspacing`.
`separate`	Кожная ячэйка табліцы будзе мець сваю мяжу (таму ў некаторых месцах межы будуць падвойнымі, калі прамежак паміж ячэйкамі нулявы).

Значэнне па змаўчанні: separate.

Прыклад . Значэнне separate

Зараз у табліцы ўсе межы падвойныя (мяжа зададзена і ячэйкам, і самой табліцы):

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

Результат:

Прыклад . Значэнне separate

А зараз мяжа зададзена ячэйкам, але самой табліцы не зададзена. Там, дзе дзве ячэйкі маюць агульную мяжу, - межы будуць падвойныя, у астатніх месцах - адзіночныя:

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

Результат:

Прыклад . Значэнне collapse

Зараз у табліцы ўсе межы зліюцца і стануць выглядаць таўшчынёй у 1px, як і хацелася б:

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

Результат: