Egenskapen empty-cells

Egenskapen empty-cells anger hur webbläsaren skal visa bakgrund och kantlinje för tomma celler td eller celler th i en HTML-tabell: visa dem eller inte.

En cell anses vara tom i följande fall: det finns inga tecken alls, cellen innehåller endast mellanslag (ett eller flera), radbrytning eller tabbtecken, eller om egenskapen visibility är satt till hidden.

För att göra en cell icke-tom, men ändå utan synlig text, används följande knep: skriv ett icke-brytande mellanslag   i cellen.

Egenskapen fungerar inte om border-collapse är satt till värdet collapse.

Syntax

selektor {
	empty-cells: show | hide;
}

Värden

Värde	Beskrivning
`show`	Bakgrund och kantlinje visas för en tom cell.
`hide`	Bakgrund och kantlinje visas inte för en tom cell.

Standardvärde: show.

Exempel . Värdet show

För närvarande är några celler i tabellen tomma, men de har ändå kantlinje och bakgrund:

<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;
}

Exempel . Värdet hide

Men nu kommer de tomma cellerna inte att ha bakgrund eller kantlinje:

<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;
}

Se även

pseudoklassen empty,
som anger hur ett tomt element ska se ut