Propiedad empty-cells

La propiedad empty-cells le indica al navegador cómo mostrar el fondo y el borde de las celdas td o celdas th de una tabla HTML: mostrarlos o no.

Una celda se considera vacía en los siguientes casos: no hay ningún carácter, la celda contiene solo espacio (uno o varios), salto de línea o tabulación, o si la propiedad visibility está establecida como hidden.

Para hacer que una celda no esté vacía, pero sin texto visible, se utiliza el siguiente truco: en la celda se escribe un espacio de no separación  .

La propiedad no funciona si se establece border-collapse con el valor collapse.

Sintaxis

selector {
	empty-cells: show | hide;
}

Valores

Valor	Descripción
`show`	El fondo y el borde se muestran en una celda vacía.
`hide`	El fondo y el borde no se muestran en una celda vacía.

Valor por defecto: show.

Ejemplo . Valor show

Actualmente en la tabla algunas celdas están vacías, pero aún así tienen borde y fondo:

<table>
	<tr>
		<td>celda</td>
		<td></td>
		<td>celda</td>
	</tr>
	<tr>
		<td></td>
		<td>celda</td>
		<td></td>
	</tr>
	<tr>
		<td>celda</td>
		<td>celda</td>
		<td>celda</td>
	</tr>
</table>

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

Ejemplo . Valor hide

Y ahora las celdas vacías no tendrán fondo ni borde:

<table>
	<tr>
		<td>celda</td>
		<td></td>
		<td>celda</td>
	</tr>
	<tr>
		<td></td>
		<td>celda</td>
		<td></td>
	</tr>
	<tr>
		<td>celda</td>
		<td>celda</td>
		<td>celda</td>
	</tr>
</table>

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

Véase también

la pseudoclase empty,
que establece cómo se verá un elemento vacío