css властивість border-collapse
Власивість border-collapse встановлює, як відображати кордони навколо комірок таблиці.
Ця властивість потрібна, коли для комірок встановлені кордони, тоді в місці стику комірок буде лінія подвійної товщини. Значення collapse змушує браузер видаляти, такі, подвійні лінії. Тоді між комірками залишться тільки один кордон, який одночасно належить обом коміркам.
Без задання в таблиці HTML використовується "розділена гранична модель". Це дає певний ефект "подвійного кордону", коли між границями кожної клітинки є пробіл, а також краю таблиці (якщо у вас також є межа елемента таблиці).
Ви можете використовувати властивість border-collapse, щоб перейти на "модель згортання кордонів". Це фактично руйнує кордони на один кордон. Тому замість того, щоб побачити "подвійну межу", ви бачите тільки одну.
Синтаксис
border-collapse: separate|collapse|initial|inherit;Властивість border-collapse може отримувати 4 значення:
separateНавколо кожної комірки відображається свій кордон, в місцях зіткнення комірок показуються відразу дві лінії.
collapseЛінія між комірками відображається тільки одна, також ігнорується значення атрибута
cellspacing.initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивостей від свого батьківського елемента
| Значення без задання: | separate |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderCollapse="collapse" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| border-collapse | 1.0 |
5.0 |
1.0 |
1.2 |
4.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| border-collapse | 2.3 |
1.0 |
3.0 |
Мобільних переглядачів ще не додано.
Приклади
Різноманітні значення і їхній вплив на таблицю
Приклад використання
Встановлення моделі стискання границь для таблиці
table {
border-collapse: collapse;
}