CSS-свойство border-collapse

CSS-свойство border-collapse указывает, будут ли соседние границы ячеек таблицы свернуты в одну границу или разделены как обычно.

Есть две разные модели для установки границ ячеек таблицы в CSS. Значение separate устанавливает модель с разделенными границами. Значение collapse устанавливает модель объединенными границами.

Разделенная модель границ

В этой модели каждая ячейка таблицы имеет отдельную границу.

Расстояние между границами соседних ячеек задается свойством border-spacing.

В модели разделенных границ только ячейки (и сама таблица) могут иметь границы; строки, столбцы, группы строк и группы столбцов границ не имеют.

Объединенная модель границ

В модели объединенных границ соседние ячейки таблицы имеют общие границы.

В модели сворачивающихся границ можно указать границы, которые охватывают всю или часть ячейки (cell), строки (row), группы строк (row group), столбца (column) и группы столбцов (column group).

Контекст использования:

Значение по умолчанию:	`separate`
Применяется к:	table и `inline-table` элементы
Наследование:	Да
Анимирование:	Нет. Анимируемые свойства
Версия:	CSS 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

border-collapse: separate | collapse | initial | inherit

Примеры написания кода свойства border-collapse:

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`separate`	Выбирает модель разделенных границ. Это значение установлено по умолчанию.
`collapse`	Выбирает модель объединенных границ. Свойства `border-spacing` и `empty-cells` будут игнорироваться.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `border-collapse`.