Propriedade empty-cells

A propriedade empty-cells especifica ao navegador como exibir o plano de fundo e a borda de células td ou células th HTML tabelas vazias: mostrar ou não.

Uma célula é considerada vazia nos seguintes casos: não há nenhum caractere, a célula contém apenas espaço (um ou mais), quebra de linha ou caractere de tabulação, ou se a propriedade visibility estiver definida como hidden.

Para tornar uma célula não vazia, mas sem texto visível, utiliza-se o seguinte método: na célula é inserido um espaço inseparável  .

A propriedade não funciona se border-collapse estiver definido com o valor collapse.

Sintaxe

seletor {
	empty-cells: show | hide;
}

Valores

Valor	Descrição
`show`	O plano de fundo e a borda são mostrados para uma célula vazia.
`hide`	O plano de fundo e a borda não são mostrados para uma célula vazia.

Valor padrão: show.

Exemplo . Valor show

Agora na tabela algumas células estão vazias, mas mesmo assim possuem borda e plano de fundo:

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

Exemplo . Valor hide

E agora as células vazias não terão plano de fundo e borda:

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

Veja também

a pseudoclasse empty,
que define a aparência de um elemento vazio