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

empty-cells

Свойство empty-cells задаёт отображение границ и фона в ячейке, если она пустая.

При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.

Ячейка считается пустой в следующих случаях:

  • нет вообще никаких символов;
  • в ячейке содержится только перевод строки, символ табуляции или пробел;
  • значение visibility установлено как hidden.

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

Демо

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

Синтаксис

1
2
3
4
5
6
7
8
/* Keyword values */
empty-cells: show;
empty-cells: hide;

/* Global values */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;

Значения

show

Отображает границу вокруг ячейки и фон в ней.

hide

Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.

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

1
empty-cells: show;

Применяется к: К <td>, <th> или к элементам, у которых display: table-cell

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

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

 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
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>empty-cells</title>
        <style>
            table {
                border: 4px double #399; /* Граница вокруг таблицы */
            }
            td {
                background: #fc0; /* Цвет фона */
                border: 1px solid #333; /* Граница вокруг ячеек */
                empty-cells: hide; /* Прячем пустые ячейки */
                padding: 5px; /* Поля в ячейках */
            }
        </style>
    </head>
    <body>
        <table width="100%">
            <tr>
                <td>Леонардо</td>
                <td>5</td>
                <td>8</td>
            </tr>
            <tr>
                <td>Рафаэль</td>
                <td></td>
                <td>11</td>
            </tr>
            <tr>
                <td>Микеланджело</td>
                <td>24</td>
                <td></td>
            </tr>
            <tr>
                <td>Донателло</td>
                <td></td>
                <td>13</td>
            </tr>
        </table>
    </body>
</html>

Комментарии