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

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>

Комментарии