CSS свойство border-collapse определяет модель отображаемой рамки для таблицы. Это имеет большое влияние на внешний вид и стиль ячеек таблицы.
По умолчанию свойство установлено в значение «separate» — это традиционная модель рамок для таблицы в HTML, когда смежные ячейки таблицы имеют свои собственные различные рамки. Расстояние между рамками ячеек контролируется свойством border-spacing.
Если модель рамки, заданная по умолчанию, не подходит, то можно воспользоваться значением «collapse» — это приведет к объединению рамок между ячейками и таблицей, то есть будет только одна общая рамка без пространства между ячейками.
Значение по умолчанию:
separate
Применяется:
к table и inline-table элементам
Анимируется:
нет
Наследуется:
да
Версия:
CSS2
Синтаксис JavaScript:
object.style.borderCollapse=»collapse»
Синтаксис
border-collapse: separate|collapse|inherit;
Значения свойства
Значение
Описание
collapse
Рамки объединяются в одну, когда это возможно (свойства border-spacing и empty-cells будут проигнорированы).
separate
Рамки раздельные (свойства border-spacing и empty-cells не игнорируются).
inherit
Указывает, что значение наследуется от родительского элемента.
CSS свойство border-collapse
Это свойство определяет, какую модель рамки вокруг ячеек таблицы следует использовать. Свойство border-collapsed определяет, должна ли ячейка иметь общую рамку с соседними ячейками, или свою собственную, как в стандартном HTML.
Внимание: Если декларация !DOCTYPE не определена, то свойство border-collapse может привести к непредсказуемым результатам.
CSS синтаксис
border-collapse: separate | collapse | initial | inherit;
Возможные значения
Значение
Описание
separate
Значение по умолчанию. Каждая ячейка таблицы будет иметь собственную рамку.
collapse
Ячейки таблицы, где это возможно, будут иметь общую рамку.
initial
Устанавливает значение по умолчанию.
inherit
Значение наследуется от родительского элемента.
Пример использования
Устанавливаем модель с общей рамкой вокруг ячеек таблицы
Свойство border-collapse
Свойство border-collapse заставляет двойные границы между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы) схлопнуться и выглядеть как одна.
Данное свойство применяется только для таблиц и для элементов с display в значении table или inline-table . Для обычных блочных элементов оно, к большому сожалению, работать не будет. Учтите, что применять следует для таблицы, а не для ее ячеек.
Синтаксис
Значения
Значение
Описание
collapse
Двойные границы будут выглядеть как одна. Есть побочные эффекты: перестанет работать свойство border-spacing и атрибут cellspacing .
separate
Каждая ячейка таблицы будет иметь свою границу (поэтому в некоторых местах границы будут двойными, если промежуток между ячейками нулевой).
Значение по умолчанию: separate .
Пример . Значение separate
Сейчас в таблице все границы двойные (граница задана и ячейкам, и самой таблице):
А сейчас граница задана ячейкам, но самой таблице не задана. Там, где две ячейки имеют общую границу, — границы будут двойные, в остальных местах — одиночные:
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
а
б
Рис. 1. Вид таблицы при использовании свойства border-collapse
Краткая информация
Значение по умолчанию
separate
Наследуется
Да
Применяется
К элементу
или к элементам, у которых значение display установлено как table или inline-table
Анимируется
Нет
Синтаксис
border-collapse: collapse | separate
Описание
Пример
Указывает тип значения.
A && B
Значения должны выводиться в указанном порядке.
&&
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]
Группирует значения.
[ crop || cross ]
*
Повторять ноль или больше раз.
[,]*
+
Повторять один или больше раз.
+
?
Указанный тип, слово или группа не является обязательным.
inset?
Повторять не менее A, но не более B раз.
#
Повторять один или больше раз через запятую.
#
Значения
collapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing. separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
Песочница
Рис. 2. Вид таблицы при использовании свойства border-collapse
Объектная модель
Объект.style.borderCollapse
Примечание
Internet Explorer до версии 8.0 не отменяет действие атрибута cellspacing .
Спецификация
Спецификация
Статус
CSS Level 2 (Revision 1)
Рекомендация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
5
12
1
4
1.2
1
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
