CSS border-spacing — відстань між комірками таблиці

Властивість border-spacing задає відстань між кордонами сусідніх комірок (тільки для моделі separated borders). Це не працюватиме в разі, коли для таблиці встановлено властивість border-collapse із значенням collapse.

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

Значення border-spacing також використовується уздовж зовнішнього краю таблиці, де відстань між межами таблиці та комірок у першому / останньому стовпчику або рядку є сумою відповідного (горизонтального або вертикального) border-spacing, а також відповіднього (верхній, правий, нижній або лівий) поля (padding).

правити

Загальний опис

правити

Нотатка

Властивість border-spacing еквівалентна атрибуту cellspacing для <table>, що не підтримується клітинами, за винятком того, що у нього є додаткове додаткове значення, яке можна використовувати для встановлення різного горизонтального та вертикального інтервалів.

автор: Svitlana правити

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

Синтаксис

border-spacing: length|initial|inherit;

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

length

Відстань між комірками. Якщо значень два, то перше визначає горизонтальну відстань, а друге - вертикальну.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	4	12	8

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

Переглядач
	4.4	18	4	1

Приклади

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

<table>
    <tr><td>10px</td><td>по горизонталі</td></tr>
    <tr><td>50px</td><td>по вертикалі</td></tr>
</table>

table {
    border-collapse: separate;
    border-spacing: 10px 50px;
}

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

td { padding: 6px; }

<table>
    <tr><th>Місто</th><th>Люди</th></tr>
    <tr><td>Київ</td><td>2,9 млн</td></tr>
    <tr><td>Харків</td><td>1,4 млн</td></tr>
</table>

table {
    border-collapse: separate;
    border-spacing: 14px 4px;
    border: 3px solid #0172ad;
}

th,
td {
    padding: 6px 12px;
    border: 2px solid #0172ad;
    font: 14px sans-serif;
}

<p>Вибери потрібне значення для <code>border-spacing</code>:</p>

<input type="number" class="input" min="0" id="x" onchange="change()" placeholder="0"></input>
<input type="number" class="input" min="0" id="y" onchange="change()" placeholder="0"></input>

<table id="block">
  <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>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

.input {
  margin-bottom: 16px;
  padding: 1px;
  font-size: 13px;
}

#block {
  border: 1px solid #666;
  width: 100%;
  transition: border-spacing .15s ease-in 0s;
  border-spacing: 0 0;
}

td, th {
  border: 1px solid #666;
  padding: 16px;
  text-align: center;
}

var block = document.getElementById('block');

function change() {
  var x = document.getElementById('x').value;
  var y = document.getElementById('y').value;
  block.style.borderSpacing = x + 'px ' + y + 'px';
}
//# sourceURL=pen.js

<p>Для таблиці задана властивість <b>border-spacing: 10px 30px;</b> </p>
<table class="spacing">
  <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>Вигляд таблиці за замовчуванням</p>
<table>
  <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>

table {
  border: 1px solid #666;
  width: 100%;
}
.spacing{
    border-spacing: 10px 30px;
}
td, th {
  border: 1px solid #666;
  padding: 16px;
  text-align: center;
}
p{
  text-align: center;
  font-size: 18px;
}