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

❮ Назад Вперед ❯

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

Свойство border-spacing может быть установлено, используя одно или две значения длины. При наличии двух значений первое устанавливает горизонтальное расстояние, а второе - вертикальное. Если имеем одно значение, оно устанавливает и горизонтальное, и вертикальное расстояние в специфицированное значение. Отрицательные значения недопустимы.

Значение по умолчанию	0
Применяется	К таблице и к строчным элементам таблицы.
Наследуется	Нет
Анимируемое	Да. Расстояние анимируемое.
Версия	CSS2
DOM синтаксис	object.style.borderSpacing = "10px";

Синтаксис

border-spacing: length | initial | inherit;

Пример с одним значением:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      table, td, th {
      border: 1px solid black;
      }
      .table {
      border-collapse: separate;
      border-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Имя</th>
        <th>Фамилия</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Попробуйте сами!

Другой пример с использованием двух значений. Первое задает горизонтальное расстояние, а второе - вертикальное.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>  
      table {
      border-spacing: 20px 30px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Заголовок</th>
          <th>Заголовок</th>
          <th>Заголовок</th>
          <th>Заголовок</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Текст</td>
          <td>Текст</td>
          <td>Текст</td>
          <td>Текст</td>
        </tr>
        <tr>
          <td>Текст</td>
          <td>Текст</td>
          <td>Текст</td>
          <td>Текст</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Попробуйте сами!

Далее установим стиль для границы. Например, можем добавить фоновой цвет:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      table, td, th {
      border: 1px solid black;
      }
      .table {
      border-collapse: separate;
      border-spacing: 20px;
      background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Имя</th>
        <th>Фамилия</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
length	Устанавливает расстояние в единицах измерения CSS (px, em или %).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.