border — collapse
Свойство border — collapse управляет отображением границ таблицы и её ячеек.
Пример
Скопировать ссылку «Пример» Скопировано
.separate border-collapse: separate;> .collapse border-collapse: collapse;>.separate border-collapse: separate; > .collapse border-collapse: collapse; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
В качестве значения для свойства border — collapse используются следующие ключевые слова:
- separate — границы отображаются отдельно друг от друга. Это значение по умолчанию.
- collapse — соседние границы отображаются как одна граница.
Как понять
Скопировать ссылку «Как понять» Скопировано
По умолчанию, границы в таблице отображаются отдельно друг от друга. Это значит, что если у неё или её ячеек есть границы, то между ними будет пространство (размерами которого можно управлять с помощью border — spacing ). Если задать свойству border — collapse значение collapse , то все смежные границы будут отображаться как одна.
border-collapse
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
 |
 |
| а | б |
Рис. 1. Вид таблицы при использовании свойства border-collapse
Краткая информация
| Значение по умолчанию | separate | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Наследуется | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Применяется | К элементу
Синтаксис
Значенияcollapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing. separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. Песочница
Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse Объектная модельОбъект.style.borderCollapse ПримечаниеInternet Explorer до версии 8.0 не отменяет действие атрибута cellspacing . Спецификация
Спецификация Каждая спецификация проходит несколько стадий одобрения.
Браузеры
В таблице браузеров применяются следующие обозначения.
Число указывает версию браузреа, начиная с которой элемент поддерживается. См. такжеРецепты
ПрактикаСправочник CSS
Свойство border-collapseСвойство border-collapse заставляет двойные границы между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы) схлопнуться и выглядеть как одна. Данное свойство применяется только для таблиц и для элементов с display в значении table или inline-table . Для обычных блочных элементов оно, к большому сожалению, работать не будет. Учтите, что применять следует для таблицы, а не для ее ячеек. СинтаксисЗначения
Значение по умолчанию: separate . Пример . Значение separateСейчас в таблице все границы двойные (граница задана и ячейкам, и самой таблице):
table < border-collapse: separate; width: 400px; border-spacing: 0; border: 1px solid red; >td < border: 1px solid red; text-align: center; > Пример . Значение separateА сейчас граница задана ячейкам, но самой таблице не задана. Там, где две ячейки имеют общую границу, — границы будут двойные, в остальных местах — одиночные:
table < border-collapse: separate; width: 400px; border-spacing: 0; >td < border: 1px solid red; text-align: center; > Пример . Значение collapseСейчас в таблице все границы схлопнутся и станут выглядеть толщиной в 1px , как и хотелось бы:
table < border-collapse: collapse; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; > border-collapseCSS свойство border-collapse определяет модель отображаемой рамки для таблицы. Это имеет большое влияние на внешний вид и стиль ячеек таблицы. По умолчанию свойство установлено в значение «separate» — это традиционная модель рамок для таблицы в HTML, когда смежные ячейки таблицы имеют свои собственные различные рамки. Расстояние между рамками ячеек контролируется свойством border-spacing. Если модель рамки, заданная по умолчанию, не подходит, то можно воспользоваться значением «collapse» — это приведет к объединению рамок между ячейками и таблицей, то есть будет только одна общая рамка без пространства между ячейками.
Синтаксисborder-collapse: separate|collapse|inherit; Значения свойства
|
