Właściwość empty-cells

Właściwość empty-cells określa przeglądarce jak wyświetlać tło i obramowanie pustych komórek td lub komórek th HTML tabeli: pokazywać czy nie.

Komórka jest uznawana za pustą w następujących przypadkach: nie ma żadnych znaków, w komórce znajduje się tylko spacja (jedna lub więcej), znak nowej linii lub tabulator, albo właściwość visibility jest ustawiona na hidden.

Aby komórka nie była pusta, ale jednocześnie bez widocznego tekstu, stosuje się następującą sztuczkę: do komórki wpisuje się niełamiącą spację  .

Właściwość nie działa, jeśli ustawiono border-collapse na wartość collapse.

Składnia

selektor {
	empty-cells: show | hide;
}

Wartości

Wartość	Opis
`show`	Tło i obramowanie są pokazywane dla pustej komórki.
`hide`	Tło i obramowanie nie są pokazywane dla pustej komórki.

Wartość domyślna: show.

Przykład . Wartość show

Obecnie w tabeli niektóre komórki są puste, ale nadal mają obramowanie i tło:

<table>
	<tr>
		<td>komórka</td>
		<td></td>
		<td>komórka</td>
	</tr>
	<tr>
		<td></td>
		<td>komórka</td>
		<td></td>
	</tr>
	<tr>
		<td>komórka</td>
		<td>komórka</td>
		<td>komórka</td>
	</tr>
</table>

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

Przykład . Wartość hide

A teraz puste komórki nie będą miały tła i obramowania:

<table>
	<tr>
		<td>komórka</td>
		<td></td>
		<td>komórka</td>
	</tr>
	<tr>
		<td></td>
		<td>komórka</td>
		<td></td>
	</tr>
	<tr>
		<td>komórka</td>
		<td>komórka</td>
		<td>komórka</td>
	</tr>
</table>

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

Zobacz też

pseudoklasa empty,
która określa, jak będzie wyglądał pusty element