Propriedade empty-cells
Última atualização: 2026-09-13
empty-cells Propriedade empty-cells
A propriedade empty-cells controla se as células vazias (células sem conteúdo ou com apenas espaços em branco) exibem suas bordas e fundo. O valor padrão show as renderiza normalmente; hide as oculta para uma aparência mais limpa. A propriedade aplica-se apenas a tabelas com border-collapse: separate.
| Categoria | |
|---|---|
| Valor Inicial | show |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
empty-cells: show | hide;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
show | hide | Palavra-chave | Bordas de células vazias |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| empty-cells | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： A propriedade empty-cells requer border-collapse: separate; não tem efeito com border-collapse: collapse.
❓ Perguntas Frequentes
QComo show e hide afetam a aparência de uma tabela?
Ashow (o padrão): as células vazias mantêm suas bordas e fundo, de modo que a grade permanece completa e contínua. hide: as bordas e o fundo das células vazias desaparecem, criando 'buracos' visuais que ficam mais limpos e convêm a dados esparsos. Observe que hide remove apenas bordas e fundo — a célula em si e sua largura ainda ocupam espaço, portanto o layout não é afetado.
QPor que empty-cells: hide não tem nenhum efeito?
AVerifique se border-collapse está como separate. A propriedade empty-cells funciona apenas com border-collapse: separate (o padrão); se a tabela definir border-collapse: collapse, a propriedade é ignorada. Essa é a causa mais comum de falha — alterne para separate e ela passa a funcionar.
QQual é o suporte do empty-cells nos navegadores?
AO suporte é excelente — todos os navegadores principais, incluindo o IE, dão suporte; é uma propriedade CSS 2.1. A única ressalva é que ela precisa de border-collapse: separate. Confirme o estado de border-collapse da tabela e nenhum prefixo é necessário.
QComo sei se uma célula está 'vazia'?
AUma célula vazia não tem conteúdo ou tem apenas espaços em branco (espaços, quebras de linha). Observe que (espaço sem quebra) conta como conteúdo, portanto empty-cells: hide não será aplicado; uma célula que contenha um elemento filho (mesmo uma div vazia) também não é vazia. Para ocultar à força essas células 'pseudo-vazias', limpe primeiro os espaços em branco internos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade table-layout
Controla o algoritmo de layout da tabela
Propriedade border-collapse
Controla a mesclagem de bordas da tabela
