Eigenschaft empty-cells

Die Eigenschaft empty-cells weist den Browser an, wie der Hintergrund und der Rand leerer Zellen td oder Zellen th einer HTML-Tabelle angezeigt werden sollen: ob sie angezeigt werden oder nicht.

Eine Zelle wird in den folgenden Fällen als leer betrachtet: Es sind überhaupt keine Zeichen vorhanden, die Zelle enthält nur Leerzeichen (eines oder mehrere), Zeilenumbrüche oder Tabulatorzeichen, oder die Eigenschaft visibility ist auf hidden gesetzt.

Um eine Zelle als nicht leer zu kennzeichnen, aber dennoch ohne sichtbaren Text, wird der folgende Trick verwendet: In die Zelle wird ein geschütztes Leerzeichen   geschrieben.

Die Eigenschaft funktioniert nicht, wenn border-collapse auf den Wert collapse gesetzt ist.

Syntax

Selektor {
	empty-cells: show | hide;
}

Werte

Wert	Beschreibung
`show`	Hintergrund und Rand werden bei einer leeren Zelle angezeigt.
`hide`	Hintergrund und Rand werden bei einer leeren Zelle nicht angezeigt.

Standardwert: show.

Beispiel . Wert show

Derzeit sind in der Tabelle einige Zellen leer, aber sie haben dennoch einen Rand und einen Hintergrund:

<table>
	<tr>
		<td>Zelle</td>
		<td></td>
		<td>Zelle</td>
	</tr>
	<tr>
		<td></td>
		<td>Zelle</td>
		<td></td>
	</tr>
	<tr>
		<td>Zelle</td>
		<td>Zelle</td>
		<td>Zelle</td>
	</tr>
</table>

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

Beispiel . Wert hide

Jetzt haben leere Zellen weder Hintergrund noch Rand:

<table>
	<tr>
		<td>Zelle</td>
		<td></td>
		<td>Zelle</td>
	</tr>
	<tr>
		<td></td>
		<td>Zelle</td>
		<td></td>
	</tr>
	<tr>
		<td>Zelle</td>
		<td>Zelle</td>
		<td>Zelle</td>
	</tr>
</table>

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

Siehe auch

die Pseudoklasse empty,
die festlegt, wie ein leeres Element aussehen wird