Свойство CSS `border-spacing`

Свойство border-spacing CSS задаёт расстояние между границами соседних ячеек в <table>. Это свойство применяется только в том случае, если border-collapse имеет значение separate.

Попробуйте

border-spacing: 0;

border-spacing: 5px;

border-spacing: 5px 1rem;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <tbody>
      <tr>
        <td>Cell 1.1</td>
        <td>Cell 1.2</td>
      </tr>
      <tr>
        <td>Cell 2.1</td>
        <td>Cell 2.2</td>
      </tr>
      <tr>
        <td>Cell 3.1</td>
        <td>Cell 3.2</td>
      </tr>
    </tbody>
  </table>
</section>

table {
  width: 15rem;
  table-layout: fixed;
}

td {
  border: 5px solid;
  border-color: crimson dodgerblue;
  padding: 0.75rem;
}

Синтаксис

/* <length> */
border-spacing: 2px;

/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;

/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;

Для свойства border-spacing можно указать одно или два значения.

• Если указано одно значение <length>, оно задаёт горизонтальные и вертикальные промежутки между ячейками.
• Если указано два значения <length>, первое значение задаёт горизонтальный промежуток между ячейками (то есть пространство между ячейками в соседних столбцах), а второе — вертикальный промежуток между ячейками (то есть пространство между ячейками в соседних строках).

Значения

<length>

Размер промежутка, заданный фиксированным значением.

Описание

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

Формальное определение

Формальный синтаксис

border-spacing = 
  <length>{1,2}

Примеры

Интервалы и внутренние отступы ячеек таблицы

В этом примере между ячейками таблицы задаётся интервал .5em по вертикали и 1em по горизонтали. Обратите внимание: у внешних краёв таблицы значения padding складываются со значениями border-spacing.

HTML

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• border-collapse, border-style
• Свойство border-spacing изменяет внешний вид HTML-элемента <table>.
• Модуль таблиц CSS