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

Власивість border-collapse встановлює, як відображати кордони навколо комірок таблиці.

Ця властивість потрібна, коли для комірок встановлені кордони, тоді в місці стику комірок буде лінія подвійної товщини. Значення collapse змушує браузер видаляти, такі, подвійні лінії. Тоді між комірками залишться тільки один кордон, який одночасно належить обом коміркам.

Без задання в таблиці HTML використовується "розділена гранична модель". Це дає певний ефект "подвійного кордону", коли між границями кожної клітинки є пробіл, а також краю таблиці (якщо у вас також є межа елемента таблиці).

Ви можете використовувати властивість border-collapse, щоб перейти на "модель згортання кордонів". Це фактично руйнує кордони на один кордон. Тому замість того, щоб побачити "подвійну межу", ви бачите тільки одну.

правити

+ додати пораду чи нотатку

Синтаксис

border-collapse: separate|collapse|initial|inherit;

Властивість border-collapse може отримувати 4 значень:

separate

Навколо кожної комірки відображається свій кордон, в місцях зіткнення комірок показуються відразу дві лінії.

автор: Svitlana

правити

collapse

Лінія між комірками відображається тільки одна, також ігнорується значення атрибута cellspacing.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивостей від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
border-collapse	1.0	1.0	1.2	4.0	12.0	5.0

Підтримка: мобільні переглядачі

Переглядач
border-collapse	2.3	1.0	3.0

Приклади

+ запропонувати свій приклад у пісочниці

<table class="a">
    <tr><td>separate</td><td>кожна комірка зі своєю рамкою</td></tr>
</table>
<table class="b">
    <tr><td>collapse</td><td>межі спільні</td></tr>
</table>

table, td {
    border: 2px solid #0172ad;
}

td { padding: 6px; }

.a { border-collapse: separate; }

.b {
    border-collapse: collapse;
    margin-top: 12px;
}