Eigenschap empty-cells

De eigenschap empty-cells geeft de browser aan hoe de achtergrond en rand van lege cellen td of cellen th van een HTML-tabel moeten worden weergegeven: wel of niet tonen.

Een cel wordt als leeg beschouwd in de volgende gevallen: er zijn helemaal geen tekens, de cel bevat alleen spaties (een of meer), regeleindes of tabtekens, of de eigenschap visibility is ingesteld op hidden.

Om een cel niet leeg te maken, maar toch zonder zichtbare tekst, wordt de volgende methode gebruikt: er wordt een niet-afbrekende spatie   in de cel geplaatst.

De eigenschap werkt niet als border-collapse is ingesteld op de waarde collapse.

Syntaxis

selector {
	empty-cells: show | hide;
}

Waarden

Waarde	Beschrijving
`show`	Achtergrond en rand worden getoond bij een lege cel.
`hide`	Achtergrond en rand worden niet getoond bij een lege cel.

Standaardwaarde: show.

Voorbeeld . Waarde show

Momenteel zijn sommige cellen in de tabel leeg, maar ze hebben toch een rand en achtergrond:

<table>
	<tr>
		<td>cel</td>
		<td></td>
		<td>cel</td>
	</tr>
	<tr>
		<td></td>
		<td>cel</td>
		<td></td>
	</tr>
	<tr>
		<td>cel</td>
		<td>cel</td>
		<td>cel</td>
	</tr>
</table>

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

Voorbeeld . Waarde hide

Maar nu zullen lege cellen geen achtergrond en rand hebben:

<table>
	<tr>
		<td>cel</td>
		<td></td>
		<td>cel</td>
	</tr>
	<tr>
		<td></td>
		<td>cel</td>
		<td></td>
	</tr>
	<tr>
		<td>cel</td>
		<td>cel</td>
		<td>cel</td>
	</tr>
</table>

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

Zie ook

pseudoklasse empty,
die bepaalt hoe een leeg element eruit zal zien