CSS border-collapse — злиття рамок таблиці
Власивість border-collapse встановлює, як відображати кордони навколо комірок таблиці.
Ця властивість потрібна, коли для комірок встановлені кордони, тоді в місці стику комірок буде лінія подвійної товщини. Значення collapse змушує браузер видаляти, такі, подвійні лінії. Тоді між комірками залишться тільки один кордон, який одночасно належить обом коміркам.
Без задання в таблиці HTML використовується "розділена гранична модель". Це дає певний ефект "подвійного кордону", коли між границями кожної клітинки є пробіл, а також краю таблиці (якщо у вас також є межа елемента таблиці).
Ви можете використовувати властивість border-collapse, щоб перейти на "модель згортання кордонів". Це фактично руйнує кордони на один кордон. Тому замість того, щоб побачити "подвійну межу", ви бачите тільки одну.
Загальний опис
автор: NagarD
Синтаксис
border-collapse: separate|collapse|initial|inherit;Властивість border-collapse може отримувати 4 значень:
-
separate -
Навколо кожної комірки відображається свій кордон, в місцях зіткнення комірок показуються відразу дві лінії.
автор: Svitlana -
collapse -
Лінія між комірками відображається тільки одна, також ігнорується значення атрибута
автор: Svitlanacellspacing. -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | separate |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderCollapse="collapse" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1.1 | 4 | 12 | 5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2.2 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У верхній таблиці кожна комірка має власну рамку з проміжком (separate, типово), у нижній collapse зливає сусідні межі в одну спільну.
HTML
<table class="a">
<tr><td>separate</td><td>кожна комірка зі своєю рамкою</td></tr>
</table>
<table class="b">
<tr><td>collapse</td><td>межі спільні</td></tr>
</table>CSS
table, td {
border: 2px solid #0172ad;
}
td { padding: 6px; }
.a { border-collapse: separate; }
.b {
border-collapse: collapse;
margin-top: 12px;
}Дві однакові таблиці: ліворуч separate дає подвійні лінії на стиках, праворуч collapse зводить їх в одну.
HTML
<figure>
<table class="separate">
<tr><th>Місто</th><th>Люди</th></tr>
<tr><td>Київ</td><td>2,9 млн</td></tr>
<tr><td>Харків</td><td>1,4 млн</td></tr>
</table>
<figcaption>border-collapse: separate</figcaption>
</figure>
<figure>
<table class="collapse">
<tr><th>Місто</th><th>Люди</th></tr>
<tr><td>Київ</td><td>2,9 млн</td></tr>
<tr><td>Харків</td><td>1,4 млн</td></tr>
</table>
<figcaption>border-collapse: collapse</figcaption>
</figure>CSS
figure {
display: inline-block;
margin: 0 20px 0 0;
font: 12px monospace;
text-align: center;
}
table {
border: 3px solid #0172ad;
}
th,
td {
padding: 6px 12px;
border: 3px solid #0172ad;
font: 14px sans-serif;
}
.separate {
border-collapse: separate;
}
.collapse {
border-collapse: collapse;
}Різноманітні значення і їхній вплив на таблицю
HTML
<div class="field-items">
<div class="field-item even">
<div id="playground-result">
<table id="playground-property" style="border-collapse: collapse;">
<tbody>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Комірка</td>
<td>Комірка</td>
<td>Комірка</td>
<td>Комірка</td>
</tr>
<tr>
<td>Комірка</td>
<td>Комірка</td>
<td>Комірка</td>
<td>Комірка</td>
</tr>
<tr>
<td>Комірка</td>
<td>Комірка</td>
<td>Комірка</td>
<td>Комірка</td>
</tr>
</tbody>
</table>
</div>
<div class="grid-x grid-margin-x">
<p>Вибери потрібне значення для властивсті <b>border-collapse</b>:</p>
<div id="playground-value" class="cell medium-12 large-6">
<label><input type="radio" name="value" value="collapse" checked="">collapse</label>
<label><input type="radio" name="value" value="separate">separate</label>
</div>
<div id="playground-code" class="cell medium-12 large-6">
<pre>table {
border-collapse: <span id="playground-code-value">collapse</span>;
}<div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></pre>
</div>
</div>
</div>
</div>CSS
#playground-property {
border: 4px double black;
border-collapse: collapse;
}
#playground-property td {
border: 1px solid black;
padding: 10px;
}
table{
width: 100%;
font-size: 20px;
}
#playground-value{
margin: 15px;
font-size: 20px;
display: block;
}
pre{
background: lightgrey;
padding: 10px;
font-weight: 700;
font-size: 20px;
}
p{
font-size: 18px;
text-decoration: underline;
}JS
var radios = document.querySelectorAll('#playground-value input[type="radio"]');function changeHandler(event) {document.getElementById('playground-property').style.borderCollapse = this.value;document.getElementById('playground-code-value').innerText = this.value;}
Array.prototype.forEach.call(radios, function (radio) {radio.addEventListener('change', changeHandler);});
//# sourceURL=pen.jsПриклад використання
HTML
<p>border-collapse: collapse</p>
<table class="collapse">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
</table>
<br>
<p>border-collapse: separate</p>
<table class="separate">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
</table>CSS
table {
border: 1px solid #666;
/* border-collapse: collapse; */
width: 100%;
}
.collapse{
border-collapse: collapse;
}
.separate{
border-collapse: separate;
}
p{
text-align: center;
font-size: 18px;
}
td, th {
border: 1px solid #666;
padding: 16px;
text-align: center;
}Коментарі
Коментарів ще немає — будьте першим!