Пример
Установите модель сворачивающихся границ для двух таблиц:
#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 свойство