Свойство CSS border-collapse отвечает за правило отрисовки границ между ячейками в таблице html.
Синтаксис CSS border-collapse
- collapse — линия между соседними границами будет общая (одна линия);
- separate (по умолчанию) — у каждой ячейки своя граница;
- inherit — применяется значение родительского элемента;
Свойство очень важное, т.к. это единственный способ корректно указать нужное значение толщины линии границы у таблиц.
Поддержка браузерами
| 12.0+ | 5.0+ | 1.0+ | 1.0+ | 4.0+ | 1.2+ |
Описание
CSS свойство border-collapse определяет модель отображаемой рамки для таблицы. Это имеет большое влияние на внешний вид и стиль ячеек таблицы.
По умолчанию свойство установлено в значение «separate» — это традиционная модель рамок для таблицы в HTML, когда смежные ячейки таблицы имеют свои собственные различные рамки. Расстояние между рамками ячеек контролируется свойством border-spacing.
Если модель рамки, заданная по умолчанию, не подходит, то можно воспользоваться значением «collapse» — это приведет к объединению рамок между ячейками и таблицей, то есть будет только одна общая рамка без пространства между ячейками.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | separate | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Наследуется | Нет | ||||||||||
| Применяется | К тегу
Версии CSS
ОписаниеУстанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
Рис. 1. Вид таблицы при использовании свойства border-collapse Синтаксисborder-collapse: collapse | separate | inherit ЗначенияHTML5 CSS2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse БраузерыInternet Explorer до версии 7.0 включительно не поддерживает значение inherit . В IE6 и IE7 не отменяется действие атрибута cellspacing . 
Создав аккаунт на облачном хранилище Яндекс.
Windows 10 имеет множество плюсов и во многом выигрывает
Многофункциональное устройство помогает распечатывать
Сегодня любой браузер позволяет смотреть контент на
Here it is, a malicious website that promotes a paid
На одном из этапов кастомизации Windows 10 можно изменить
В операционной системе Windows 10 существует огромное
Для любителей погонять в компьютерные игры не секрет
|
Русский
English