# Свойство border-collapse

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

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

## Синтаксис

`селектор { border-collapse: collapse | separate; }`

## Значения

Значение | Описание
--- | ---
`collapse` | Двойные границы будут выглядеть как одна. Есть побочные эффекты: перестанет работать свойство `border-spacing` и атрибут `cellspacing`.
`separate` | Каждая ячейка таблицы будет иметь свою границу (поэтому в некоторых местах границы будут двойными, если промежуток между ячейками нулевой).

Значение по умолчанию: `separate`.

## Пример . Значение separate

Сейчас в таблице все границы двойные (граница задана и ячейкам, и самой таблице):

`<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>` `table { border-collapse: separate; width: 400px; border-spacing: 0; border: 1px solid red; } td { border: 1px solid red; text-align: center; }`

:

## Пример . Значение separate

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

`<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>` `table { border-collapse: separate; width: 400px; border-spacing: 0; } td { border: 1px solid red; text-align: center; }`

:

## Пример . Значение collapse

Сейчас в таблице все границы схлопнутся и станут выглядеть толщиной в `1px`, как и хотелось бы:

`<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>` `table { border-collapse: collapse; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }`

:

← →
↑
en ru