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" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
border-collapse | 1.0 | 5.0 | 1.0 | 1.2 | 4.0 |
Синтаксис CSS
border-collapse: separate|collapse|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
separate | Границы разделены; Каждая ячейка будет отображать свои собственные границы. Это значение по умолчанию. | |
collapse | Границы свернуты в одну границу, когда это возможно (граница-пробелы и пустые-ячейки свойства не имеют эффекта) | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
При использовании "граница-свернуть: разделить", граница-шаг свойство может быть использовано для установки пространства между ячейками:
#table1 {
border-collapse: separate;
border-spacing: 10px;
}
Пример
При использовании "border-свернуть: свернуть", ячейка, которая появляется первым в коде будет "Win":
table, td, th {
border: 3px solid red;
}
#table1 {
border-collapse:
collapse;
border-color: blue;
}
Похожие страницы
CSS Справочник: CSS Table
HTML DOM Справочник: borderCollapse Свойство