A empty-cellspropriedade em CSS seleciona células vazias da tabela com o propósito de especificar se deve ou não exibir bordas e fundos sobre elas. Em outras palavras, ele informa ao navegador se deve ou não desenhar bordas ao redor de uma célula da tabela ou preencher o plano de fundo quando essa célula não tiver conteúdo. É como aplicar uma visibilitypropriedade em células vazias de uma tabela.
table ( empty-cells: show; )Valores
A empty-cellspropriedade tem dois valores principais:
show: exibe uma borda e um plano de fundo em uma célula vazia.hide: não exibe uma borda ou plano de fundo em uma célula vazia.
Os seguintes valores globais também são aceitos:
inherit: herda o valor da propriedade do elemento pai.initial: use o valor padrão definido para a propriedade.unset: redefine a propriedade para seu valor herdado.
Quando usar
Esta é uma propriedade interessante porque dá ao CSS a capacidade de verificar a marcação HTML do conteúdo dentro de uma tabela e responder de acordo. Normalmente não pensamos em CSS como uma linguagem dinâmica, mas esta é uma instância em que isso se aproxima.
Um bom caso de uso para empty-cellspode ser uma situação em que você pode não saber se uma tabela conterá ou não pontos de dados vazios e você decide ocultá-los. As tabelas costumavam ser a forma de construção de layouts de página da web, portanto, pode ser uma ferramenta útil para mostrar e ocultar elementos quando as tabelas são usadas para apresentação ou onde os elementos contêm a display: tablepropriedade.
Demo
Veja a Pena mPLVzB por CSS-Tricks (@ css-tricks) em CodePen.
Relacionado
displayvisibility:empty
Mais Informações
- Especificação de nível 2 de CSS
- Referência MDN
- Demonstração do SitePoint no CodePen
- Camadas de mesa e demonstração de transparência no CodePen
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1,2 | 1,1 | 4,0 | 8,0 | 1.0 | 3,1 |