Свойство border-collapse
Свойство border-collapse заставляет двойные границы между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы) схлопнуться и выглядеть как одна.
Данное свойство применяется только для таблиц и для элементов с display в значении table или inline-table . Для обычных блочных элементов оно, к большому сожалению, работать не будет. Учтите, что применять следует для таблицы, а не для ее ячеек.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| collapse | Двойные границы будут выглядеть как одна. Есть побочные эффекты: перестанет работать свойство border-spacing и атрибут cellspacing . |
| separate | Каждая ячейка таблицы будет иметь свою границу (поэтому в некоторых местах границы будут двойными, если промежуток между ячейками нулевой). |
Значение по умолчанию: separate .
Пример . Значение separate
Сейчас в таблице все границы двойные (граница задана и ячейкам, и самой таблице):
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
table < border-collapse: separate; width: 400px; border-spacing: 0; border: 1px solid red; >td < border: 1px solid red; text-align: center; >
Пример . Значение separate
А сейчас граница задана ячейкам, но самой таблице не задана. Там, где две ячейки имеют общую границу, — границы будут двойные, в остальных местах — одиночные:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
table < border-collapse: separate; width: 400px; border-spacing: 0; >td < border: 1px solid red; text-align: center; >
Пример . Значение collapse
Сейчас в таблице все границы схлопнутся и станут выглядеть толщиной в 1px , как и хотелось бы:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
table < border-collapse: collapse; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >
border-collapse
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
 |
 |
| а | б |
Рис. 1. Вид таблицы при использовании свойства border-collapse
Краткая информация
| Значение по умолчанию | separate | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Наследуется | Да | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Применяется | К элементу
СинтаксисСинтаксис
Значенияcollapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing. separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. Песочница
Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse Объектная модельОбъект.style.borderCollapse ПримечаниеInternet Explorer до версии 8.0 не отменяет действие атрибута cellspacing . Спецификация
Спецификация Каждая спецификация проходит несколько стадий одобрения.
Браузеры
Браузеры В таблице браузеров применяются следующие обозначения.
Число указывает версию браузреа, начиная с которой элемент поддерживается. См. такжеborder — collapseСвойство border — collapse управляет отображением границ таблицы и её ячеек. ПримерСкопировать ссылку «Пример» Скопировано
Как пишетсяСкопировать ссылку «Как пишется» Скопировано В качестве значения для свойства border — collapse используются следующие ключевые слова:
Как понятьСкопировать ссылку «Как понять» Скопировано По умолчанию, границы в таблице отображаются отдельно друг от друга. Это значит, что если у неё или её ячеек есть границы, то между ними будет пространство (размерами которого можно управлять с помощью border — spacing ). Если задать свойству border — collapse значение collapse , то все смежные границы будут отображаться как одна. css властивість border-collapseВласивість border-collapse встановлює, як відображати кордони навколо комірок таблиці.
Ця властивість потрібна, коли для комірок встановлені кордони, тоді в місці стику комірок буде лінія подвійної товщини. Значення collapse змушує браузер видаляти, такі, подвійні лінії. Тоді між комірками залишться тільки один кордон, який одночасно належить обом коміркам. Без задання в таблиці HTML використовується «розділена гранична модель». Це дає певний ефект «подвійного кордону», коли між границями кожної клітинки є пробіл, а також краю таблиці (якщо у вас також є межа елемента таблиці). Ви можете використовувати властивість border-collapse , щоб перейти на «модель згортання кордонів». Це фактично руйнує кордони на один кордон. Тому замість того, щоб побачити «подвійну межу», ви бачите тільки одну. СинтаксисВластивість border-collapse може отримувати 4 значення: Навколо кожної комірки відображається свій кордон, в місцях зіткнення комірок показуються відразу дві лінії. Лінія між комірками відображається тільки одна, також ігнорується значення атрибута cellspacing . Встановлює властивість у значення без задання Вказує на спадковість властивостей від свого батьківського елемента
Переглядачі
|
