Свойство CSS border-collapse
Пример
Установите модель сворачивающихся границ для двух таблиц:
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство border-collapse
устанавливает, должны ли границы таблицы сворачиваться в одну границу или должны быть разделены, как в стандартном HTML.
Значение по умолчанию: | отдельный |
---|---|
Унаследовано: | да |
Анимация: | нет. Читать об анимации |
Версия: | CSS2 |
Синтаксис JavaScript: | объект .style.borderCollapse="свернуть" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
border-collapse | 1.0 | 5.0 | 1.0 | 1.2 | 4.0 |
Синтаксис CSS
border-collapse: separate|collapse|initial|inherit;
Значения свойств
Value | Description | Play it |
---|---|---|
separate | Borders are separated; each cell will display its own borders. This is default. | |
collapse | Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
При использовании «граница-коллапс: отдельно» свойство границы-промежуток можно использовать для установки расстояния между ячейками:
#table1 {
border-collapse: separate;
border-spacing: 10px;
}
Пример
При использовании «граница-коллапс: коллапс» ячейка, которая появляется первой в коде, «выиграет»:
table, td, th {
border: 3px solid red;
}
#table1 {
border-collapse:
collapse;
border-color: blue;
}
Связанные страницы
Учебное пособие по CSS: Таблица CSS
Справочник по HTML DOM: свойство borderCollapse