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

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

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

Внимание! Если задано свойство border-collapse в значении collapse - empty-cells работать не будет.

Синтаксис

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

Значения

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

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

Примеры

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

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

table {
	width: 400px; 
	empty-cells: show; 
}
td {
	border: 1px solid black; 
	background-color: #F3F3F3; 
	text-align: center; 
}

Результат выполнения кода:

1 2 3
4 5 6
7 8 9

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

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

table {
	width: 400px; 
	empty-cells: hide; 
}
td {
	border: 1px solid black; 
	background-color: #F3F3F3; 
	text-align: center; 
}

Результат выполнения кода:

1 2 3
4 5 6
7 8 9