border-collapse
Установите модель сворачивающихся границ для двух таблиц:
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
Попробуйте сами »
Определение border-collapse
CSS свойство border-collapse
определяет, должны ли границы таблицы сворачиваться в единую рамку или быть разделены, как в стандартном HTML.
Значение по умолчанию: | separate |
---|---|
Унаследовано: | yes |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS2 |
JavaScript синтаксис: | object.style.borderCollapse="collapse" Попробуй |
Поддержка border-collapse
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
border-collapse | 1.0 | 5.0 | 1.0 | 1.2 | 4.0 |
Синтаксис border-collapse
border-collapse: separate|collapse|initial|inherit;
Значения border-collapse
Значение | Описание | Демонстрация |
---|---|---|
separate | Границы разделены; каждая ячейка будет отображать собственные границы. Это значение по умолчанию. | Демо ❯ |
collapse | Границы сворачиваются в единую рамку, когда это возможно (свойства интервала между границами и пустых ячеек не влияют) | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-collapse
При использовании "border-collapse: separate" свойство border-spacing можно использовать для установки расстояния между ячейками:
#table1 {
border-collapse: separate;
border-spacing: 10px;
}
Попробуйте сами »
При использовании "border-collapse: collapse" ячейка, которая появляется первой в коде, будет "выигрышной".;:
table, td, th {
border: 3px solid red;
}
#table1 {
border-collapse:
collapse;
border-color: blue;
}
Попробуйте сами »
Страницы по теме border-collapse
CSS Учебник: CSS Таблица
HTML DOM справочник: borderCollapse свойство