border-spacing

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

/* <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 = 
  <length>{1,2}  

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

HTML

<table>
  <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>
</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 изменяет внешний вид элемента <table> HTML.
• Модуль CSS таблицы