Свойство empty-cells

Свойството empty-cells указва на браузъра как да показва фона и границата на празни клетки td или клетки th на HTML таблица: да ги показва или не.

Една клетка се счита за празна в следните случаи: няма никакви символи, в клетката се съдържа само интервал (един или няколко), нов ред или табулация, или свойството visibility е зададено като hidden.

За да направите клетката непразна, но в същото време без видим текст, се използва следният прием: в клетката се записва неразделяем интервал  .

Свойството не работи, ако е зададен border-collapse със стойност collapse.

Синтаксис

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

Стойности

Стойност	Описание
`show`	Фон и граница се показват при празна клетка.
`hide`	Фон и граница не се показват при празна клетка.

Стойност по подразбиране: show.

Пример . Стойност show

В момента в таблицата някои клетки са празни, но те все пак имат граница и фон:

<table>
	<tr>
		<td>клетка</td>
		<td></td>
		<td>клетка</td>
	</tr>
	<tr>
		<td></td>
		<td>клетка</td>
		<td></td>
	</tr>
	<tr>
		<td>клетка</td>
		<td>клетка</td>
		<td>клетка</td>
	</tr>
</table>

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

Пример . Стойност hide

А сега празните клетки няма да имат фон и граница:

<table>
	<tr>
		<td>клетка</td>
		<td></td>
		<td>клетка</td>
	</tr>
	<tr>
		<td></td>
		<td>клетка</td>
		<td></td>
	</tr>
	<tr>
		<td>клетка</td>
		<td>клетка</td>
		<td>клетка</td>
	</tr>
</table>

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

Вижте също

псевдоклас empty,
който задава как ще изглежда празен елемент