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

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

По умолчанию каждая ячейка <table> рисует собственную границу, поэтому граница между двумя соседними ячейками на самом деле состоит из двух рядом стоящих линий (плюс возможный зазор между ними). Это нередко выглядит как толстая двойная линия. Свойство border-collapse позволяет выбрать между таким классическим табличным видом и более аккуратной сеткой из одинарных линий.

separate (значение по умолчанию) — каждая ячейка сохраняет собственные границы. Расстояние между границами соседних ячеек задаётся свойством border-spacing.
collapse — соседние границы объединяются в одну. Браузер выбирает «победившую» границу для каждого общего края на основе ширины, стиля и цвета, а border-spacing игнорируется.

Это свойство действует только на элементы <table> и display: inline-table и является одним из редких случаев, когда границы, заданные для <table>, его строк и ячеек, взаимодействуют друг с другом.

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

Синтаксис

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

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

Пример свойства border-collapse:

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

<!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>

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

Результат

В примере ниже можно наблюдать контраст непосредственно. При border-collapse: separate свойство border-spacing задаёт зазор между ячейками. При border-collapse: collapse свойство border-spacing не оказывает эффекта — ячейки примыкают друг к другу, а их границы объединяются.

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

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

<!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; /* ignored when border-collapse is collapse */
      }
    </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>

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

Значения

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

Как работает модель объединения границ

Когда задано border-collapse: collapse, каждый общий край может нарисовать лишь одну границу, поэтому браузер должен разрешить конфликты между границами, объявленными для таблицы, строки и двух соседних ячеек. Правила в порядке приоритета:

Граница со значением border-style: hidden всегда побеждает и полностью убирает край.
Более широкая граница побеждает более узкую.
Если ширины равны, стили ранжируются следующим образом: double > solid > dashed > dotted > ridge > outset > groove > inset.
Если ширина и стиль по-прежнему совпадают, побеждает граница элемента, наиболее близкого к ячейке (ячейка > строка > таблица).

Именно поэтому в режиме объединения задание разной ширины границ для <td> и <table> может выглядеть не так, как ожидается, — отрисовывается только «победившая» граница.

Когда использовать

Используйте collapse для большинства таблиц данных. Это создаёт аккуратную сетку из одинарных линий, привычную для пользователей электронных таблиц, и является самым простым способом избежать двойных границ.
Оставляйте separate, когда нужны видимые промежутки между ячейками (установите border-spacing), скруглённые углы ячеек или отдельные границы, которые не должны объединяться.
Обратите внимание: border-radius для ячеек визуально работает только в режиме separate; при объединённых границах скругление невозможно.

Практика

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

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

Связанные ресурсы

CSS-свойство border-spacing — задаёт зазор между ячейками при border-collapse: separate.
CSS-свойство empty-cells — показывает или скрывает границы пустых ячеек (действует только в режиме separate).
CSS-свойство table-layout — управляет тем, как браузер определяет ширину столбцов таблицы.
CSS-свойство border — сокращённое свойство для ширины, стиля и цвета границы элемента.