Свойство border-spacing

Свойството border-spacing задава разстояние между клетките td или клетките th на HTML таблица (и между границата на клетката и самата таблица). Стойността на свойството са всякакви мерни единици за размери, с изключение на проценти.

Синтаксис

cssселектор {
  border-spacing: една или две стойности;
}

Стойности

Стойност	Описание
една стойност	Една стойност задава еднакви разстояния между клетките по вертикала и по хоризонтала.
две стойности	Първата стойност задава разстояние по хоризонтала, а втората стойност - разстояние по вертикала.

Стойност по подразбиране: 0. Въпреки това, всеки браузър има своя, ненулева стойност на атрибута cellspacing, затова по подразбиране ще видите разстояния между клетките.

Забележки

Прилагайте свойството за таблици, а не за нейните клетки (за клетките няма да работи).

Подобен ефект не може да се постигне с помощта на margin, тъй като margin за клетките на таблицата не работи.

Ако е зададено свойството border-collapse със стойност collapse - border-spacing няма да работи.

Пример . Една стойност

Нека направим разстояния между клетките (и между клетката и границата на таблицата) от 10px:

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>

csstable {
  border-spacing: 10px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Пример . Две стойности

А сега нека направим разстояния от 10px по хоризонтала и 30px по вертикала:

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>

csstable {
  border-spacing: 10px 30px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Пример . Задаваме border-collapse: collapse

А ето сега border-spacing няма да работи поради свойството border-collapse със стойност collapse:

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>

csstable {
  border-collapse: collapse;
  border-spacing: 10px 30px;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: