Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
а
б
Рис. 1. Вид таблицы при использовании свойства border-collapse
Синтаксис
border-collapse: collapse | separate | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse
Браузеры
border-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
Наследуется
Нет
Применяется
К тегу
или к элементам, у которых значение display установлено как table или inline-table
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
а
б
Рис. 1. Вид таблицы при использовании свойства border-collapse
Синтаксис
border-collapse: collapse | separate | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse
Браузеры
CSS border-collapse Свойство
Пример
Установите модель свертывания границ для двух таблиц:
#table1 < border-collapse: separate; >
#table2 < border-collapse: collapse; >
Подробнее примеры ниже.
Определение и использование
Свойство border-collapse устанавливает, должны ли границы таблицы сворачиваться в одну границу или разделяться как в стандартном HTML.
Значение по умолчанию:
separate
Inherited:
yes
Animatable:
no. Читайте о animatable
Version:
CSS2
Синтаксис JavaScript:
object.style.borderCollapse=»collapse»
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Синтаксис CSS
Значения свойств
Значение
Описание
separate
Границы разделены; Каждая ячейка будет отображать свои собственные границы. Это значение по умолчанию.
collapse
Границы свернуты в одну границу, когда это возможно (граница-пробелы и пустые-ячейки свойства не имеют эффекта)
initial
Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit
Наследует это свойство из родительского элемента. (Читайте о inherit)
Другие примеры
Пример
При использовании «граница-свернуть: разделить», граница-шаг свойство может быть использовано для установки пространства между ячейками:
Пример
При использовании «border-свернуть: свернуть», ячейка, которая появляется первым в коде будет «Win»:
Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Расположение и границы : border-collapse
смотрим также
Материал из Справочник Web-языков
Содержание
Атрибут border-collapse | Свойство borderCollapse
Это свойство устанавливает, как отображать границы вокруг ячеек таблицы.
Синтаксис
Возможные значения
sCollapse Строка, которая может определять и принимать одно из следующих значений:
separate
Значение по умолчанию. Вокруг каждой ячейки отображается своя собственная рамка.
collapse
Границы между ячейками сливаются. Между ячейками отображается только одна линия.
Свойство borderCollapse не наследуется, то есть должно быть определено отдельно для каждого элемента. Значением по умолчанию является separate.
Замечания
Задание свойства borderCollapse играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна линия границы, одновременно принадлежащая обеим ячейкам.
То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
Примеры
Пример иллюстрирует применение свойства borderCollapse и атрибута border-collapse для объединения границ ячеек в таблице.
Стандарты
Поддерживаемые браузеры
Internet Explorer частично в версиях 6.0 и 7.0, в версии 8.0 возможны ошибки
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
Internet Explorer 8 ошибочно отрисовывает границу при значении hidden свойства border-style.
border-collapse
Свойство CSS border-collapse используется для управления способом отображения рамок (границ) вокруг ячеек таблицы. По умолчанию браузеры выделяют каждой ячейке собственную рамку, а с помощью border-collapse можно сделать границы ячеек общими с границами соседних ячеек.
Тип свойства
Значения
Значением свойства border-collapse является одно из ключевых слов.
Процентная запись: не существует.
Значение по умолчанию: separate.
Таблица с border-collapse: collapse.
Таблица с border-collapse: separate.
Синтаксис
Пример CSS: использование border-collapse
Результат. Использование свойства CSS border-collapse.
