СSS Свойство border-collapse
Пример
Установить модель сворачивающихся границ для двух таблиц:
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
Попробуйте сами »
Определение и использование
Свойство border-collapse задает, должны ли границы таблицы сворачиваться в одну границу или разделяться, как в стандартном HTML.
| Значение по умолчанию: | separate |
|---|---|
| Унаследованный: | да |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | 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 | Границы сворачиваются в одну границу, когда это возможно (свойства border-spacing и empty-cells имеют эффект нет) | Воспроизвести » |
| initial | Задает для этого свойства значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
При использовании "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;
}
Попробуйте сами »
Связанные страницы
CSS учебник: CSS Table
HTML DOM справочник: Свойство borderCollapse
