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

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

Когда имеется только одна граница между ячейками, значениями для свойства border-style являются "inset", которое действует также, как "groove", и "outset", которое действует как "ridge". Когда ячейки разделены, расстояние между ними определяется свойством border-spacing.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Установлено значение "collapse" для свойства border-collapse.</p>
    <table>
      <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>

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

В следующем примере можно увидеть, что, когда используем "border-collapse: separate", можно установить расстояние между ячейками с помощью свойства border-collapse, а если используем "border-collapse: collapse" свойство border-collapse не имеет эффекта:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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>
    <h2>Пример свойства border-collapse</h2>
    <h3>border-collapse: separate;</h3>
    <p>Если используем "border-collapse: separate", свойство border-spacing может быть использовано для установления расстояния между ячейками.</p>
    <table id="table1">
      <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>
    <h3>border-collapse: collapse;</h3>
    <p>Если используем "border-collapse: collapse", свойство border-spacing не имеет эффекта.</p>
    <table id="table2">
      <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>

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

Значения

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