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.

Поддержка браузеров

Свойство border-collapse поддерживается во всех основных браузерах.

Всегда используйте валидный <!DOCTYPE> при использовании свойства border-collapse, иначе это может привести к неожиданным результатам.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.