# Свойство empty-cells

Свойство `empty-cells` указывает браузеру как отображать фон и границу пустых ячеек td или ячеек th HTML таблицы: показывать или нет.

Ячейка считается пустой в следующих случаях: нет вообще никаких символов, в ячейке содержится только пробел (один или несколько), перевод строки или символ табуляции, либо свойство `visibility` установлено как `hidden`.

Чтобы сделать ячейку не пустой, но при этом без видимого текста, используют следующий прием: в ячейку записывают неразрывный пробел `&nbsp;`.

Свойство не работает, если задан `border-collapse` в значении `collapse`.

## Синтаксис

`селектор { empty-cells: show | hide; }`

## Значения

Значение | Описание
--- | ---
`show` | Фон и граница показываются у пустой ячейки.
`hide` | Фон и граница не показываются у пустой ячейки.

Значение по умолчанию: `show`.

## Пример . Значение show

Сейчас в таблице некоторые ячейки пустые, но они все равно имеют границу и фон:

`<table> <tr> <td>cell</td> <td></td> <td>cell</td> </tr> <tr> <td></td> <td>cell</td> <td></td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> </tr> </table>` `table { width: 400px; empty-cells: show; } td { border: 1px solid black; background-color: #f3f3f3; text-align: center; }`

:

## Пример . Значение hide

А вот теперь пустые ячейки не будут иметь фон и границу:

`<table> <tr> <td>cell</td> <td></td> <td>cell</td> </tr> <tr> <td></td> <td>cell</td> <td></td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> </tr> </table>` `table { width: 400px; empty-cells: hide; } td { border: 1px solid black; background-color: #f3f3f3; text-align: center; }`

:

## Смотрите также

- псевдокласс `empty`,
  который задает то, как будет выглядеть пустой элемент

←→
↑