Свойство empty-cells

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

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

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

Свойство не работает, если задан 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,
который задает то, как будет выглядеть пустой элемент