css властивість border-collapse


Власивість 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; 


}

Додаткові посилання