border-collapse

Обновлено: 17.01.2023

border-collapse

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

Рис. 1. Вид таблицы при использовании свойства border-collapse

Краткая информация

Значение по умолчанию separate
Наследуется Да
Применяется К элементу <table> или к элементам, у которых значение display установлено как table или inline-table
Анимируется Нет

Синтаксис

border-collapse: collapse | separate

Значения

collapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

Пример

Объектная модель

Объект.style.borderCollapse

Примечание

Internet Explorer до версии 8.0 не отменяет действие атрибута cellspacing.

Браузеры

border-collapse

Посмотреть совместимость на Can I use?

border-collapse