Свойство CSS border-collapse

Свойство CSS border-collapse определяет, должны ли границы таблицы быть разделены или объединены в одну.

При объединении ячеек соседние границы сливаются в одну. При разделении ячеек расстояние между ними задаётся свойством border-spacing.

Значение по умолчанию	separate
Применяется к	Элементы table и inline-table.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS2
Синтаксис DOM	object.style.borderCollapse = "collapse";

Синтаксис

Синтаксис свойства CSS border-collapse

css

border-collapse: separate | collapse | initial | inherit | unset;

Пример использования свойства border-collapse:

Пример использования свойства CSS border-collapse со значением collapse

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 50px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-collapse property example</h2>
    <p>Here the "collapse" value is set for the border-collapse property.</p>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Результат

В примере ниже видно, что при использовании border-collapse: separate свойство border-spacing задаёт расстояние между ячейками. При использовании border-collapse: collapse свойство border-spacing не влияет на результат.

Пример использования свойства border-collapse со значениями "separate" и "collapse":

Пример использования свойства CSS border-collapse со значением separate

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid #ccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 30px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
      #table1 {
        border-collapse: separate;
        border-spacing: 10px;
      }
      #table2 {
        border-collapse: collapse;
        border-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Border-collapse property example</h1>
    <h2>border-collapse: separate;</h2>
    <p>When using the "border-collapse: separate", the border-spacing property can be used to define the space between the cells.</p>
    <table id="table1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
    <h2>border-collapse: collapse;</h2>
    <p>When using the "border-collapse: collapse", the border-spacing property has no effect.</p>
    <table id="table2">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
separate	Каждая ячейка имеет свои собственные границы. Это значение по умолчанию. Свойство border-spacing управляет расстоянием между ячейками.
collapse	Ячейки разделяют свои границы. Соседние границы сливаются в одну.
initial	Устанавливает для свойства значение по умолчанию.
inherit	Наследует свойство от родительского элемента.
unset	Сбрасывает свойство к его начальному значению.

Практика

Что делает свойство CSS 'border-collapse'?

Оно задаёт расстояние между ячейками в таблице.Позволяет выбрать, должны ли границы таблицы объединяться в одну или отображаться как отдельные.Оно изменяет размер таблицы.Оно используется для задания цвета границ таблицы.Оно определяет стиль для четырёх границ ячейки таблицы.

Свойство CSS border-collapse ​

Синтаксис ​

Пример использования свойства border-collapse: ​

Результат ​

Пример использования свойства border-collapse со значениями "separate" и "collapse": ​

Значения ​