Перейти к содержанию

border-collapse

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

Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

Рис. 1а. Рамки двойной толщины

Рис. 1а. Общие рамки ячеек таблицы

Демо

Когда ячейки свернуты, значение inset в border-style ведет себя как groove, а outset ведет себя как ridge.

Когда ячейки разделены, расстояние между ячейками определяется свойством border-spacing.

Фон
Колонки и таблицы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: revert-layer;
border-collapse: unset;

Значения

collapse
Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

Значение по-умолчанию:

1
border-collapse: separate;

Применяется к элементу <table> или к элементам, у которых значение display установлено как table или inline-table.

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-collapse</title>
    <style>
      table {
        width: 100%; /* Ширина таблицы */
        border: 4px double black; /* Рамка вокруг таблицы */
        border-collapse: collapse; /* Отображать только одинарные линии */
      }
      th {
        text-align: left; /* Выравнивание по левому краю */
        background: #ccc; /* Цвет фона ячеек */
        padding: 5px; /* Поля вокруг содержимого ячеек */
        border: 1px solid black; /* Граница вокруг ячеек */
      }
      td {
        padding: 5px; /* Поля вокруг содержимого ячеек */
        border: 1px solid black; /* Граница вокруг ячеек */
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th></th>
        <th>2013</th>
        <th>2014</th>
        <th>2015</th>
      </tr>
      <tr>
        <td>Нефть</td>
        <td>43</td>
        <td>51</td>
        <td>79</td>
      </tr>
      <tr>
        <td>Золото</td>
        <td>29</td>
        <td>34</td>
        <td>48</td>
      </tr>
      <tr>
        <td>Дерево</td>
        <td>38</td>
        <td>57</td>
        <td>36</td>
      </tr>
    </table>
  </body>
</html>

Комментарии