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