Proprietà empty-cells

La proprietà empty-cells indica al browser come visualizzare lo sfondo e il bordo delle celle td o celle th HTML tabella vuote: mostrarli o meno.

Una cella è considerata vuota nei seguenti casi: non ci sono caratteri di alcun tipo, la cella contiene solo spazi (uno o più), caratteri di a capo o di tabulazione, oppure se la proprietà visibility è impostata su hidden.

Per rendere una cella non vuota, ma allo stesso tempo senza testo visibile, si utilizza il seguente espediente: nella cella si inserisce una spazio unificatore  .

La proprietà non funziona se è impostata la proprietà border-collapse con il valore collapse.

Sintassi

selettore {
	empty-cells: show | hide;
}

Valori

Valore	Descrizione
`show`	Lo sfondo e il bordo vengono mostrati per una cella vuota.
`hide`	Lo sfondo e il bordo non vengono mostrati per una cella vuota.

Valore predefinito: show.

Esempio . Valore show

Attualmente nella tabella alcune celle sono vuote, ma hanno comunque bordo e sfondo:

<table>
	<tr>
		<td>cella</td>
		<td></td>
		<td>cella</td>
	</tr>
	<tr>
		<td></td>
		<td>cella</td>
		<td></td>
	</tr>
	<tr>
		<td>cella</td>
		<td>cella</td>
		<td>cella</td>
	</tr>
</table>

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

Esempio . Valore hide

Ora invece le celle vuote non avranno sfondo e bordo:

<table>
	<tr>
		<td>cella</td>
		<td></td>
		<td>cella</td>
	</tr>
	<tr>
		<td></td>
		<td>cella</td>
		<td></td>
	</tr>
	<tr>
		<td>cella</td>
		<td>cella</td>
		<td>cella</td>
	</tr>
</table>

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

Vedi anche

la pseudoclasse empty,
che imposta l'aspetto di un elemento vuoto