Propriedade CSS empty-cells

A propriedade empty-cells controla se bordas e fundo são desenhados nas células vazias de uma tabela. Uma célula vazia é um <td> ou <th> que não possui nenhum conteúdo. Uma célula que contenha apenas espaço em branco (um espaço, um  , ou uma quebra de linha) ainda é considerada não vazia, portanto a propriedade não a afeta.

Esta página explica o que empty-cells faz, quando ela realmente tem efeito, os valores que aceita e os cuidados a ter.

Quando a propriedade se aplica

empty-cells só tem efeito visível quando as bordas das células estão separadas — ou seja, quando a tabela usa border-collapse: separate (o padrão). Com border-collapse: collapse, células adjacentes compartilham uma única borda, portanto não há borda ou fundo separados para uma célula vazia ocultar, e a propriedade é ignorada.

Como os valores padrão já são border-collapse: separate e empty-cells: show, as células vazias são exibidas por padrão e você só precisa desta propriedade para ocultá-las.

Valor inicial	show
Aplicável a	elementos table-cell
Herdado	Não.
Animável	Não
Versão	CSS2
Sintaxe DOM	object.style.emptyCells = "hide";

Sintaxe

Sintaxe da propriedade CSS empty-cells

empty-cells: show | hide | initial | inherit;

Exemplo da propriedade empty-cells:

Exemplo da propriedade CSS empty-cells com os valores show e hide

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      td,
      th {
        border: 1px solid #1c87c9;
        padding: 0.5rem;
      }
      table {
        border-collapse: separate;
      }
    </style>
  </head>
  <body>
    <h2>Empty-cells property example</h2>
    <p>Here the "show" value is used: </p>
    <table class="show">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
    <br />
    <p>In this table the "hide" value is used:</p>
    <table class="hide">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Na primeira tabela, a célula vazia inferior direita mantém sua borda. Na segunda, empty-cells: hide remove completamente a borda e o fundo dessa célula, fazendo com que o espaço apareça em branco. Use hide quando uma tabela puder conter lacunas e você quiser uma aparência mais limpa — por exemplo, uma grade de agenda ou de preços onde nem todos os slots estão preenchidos.

Exemplo com fundo colorido:

Exemplo da propriedade CSS empty-cells com os valores hide e show

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      body {
        background: #1c87c9;
        padding: 25px 0;
        color: #fff;
        font-size: 2em;
        text-align: center;
      }
      table {
        border-collapse: separate;
      }
      td {
        background: #fff;
        border: 1px solid #8ebf42;
        padding: 10px 15px;
        color: green;
      }
    </style>
  </head>
  <body>
    <p>The empty cells are shown</p>
    <table class="show">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
    <p>The empty cells are hidden</p>
    <table class="hide">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Quando hide é aplicado, a célula vazia não exibe nem seu fundo branco nem sua borda verde — ela se mistura ao fundo azul da página.

Resultado

Valores

Valor	Descrição	Experimente
show	As bordas e o fundo das células vazias são desenhados. Este é o valor padrão.	Experimente »
hide	As bordas e o fundo das células vazias não são desenhados, fazendo com que as células vazias apareçam em branco.	Experimente »
initial	Redefine a propriedade para seu valor padrão (`show`).	Experimente »
inherit	Herda o valor do elemento pai. Note que `empty-cells` não é herdado por padrão.

Suporte de navegadores

empty-cells faz parte do CSS2 e é suportado em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera. Nenhum prefixo de fornecedor é necessário.

Observações e cuidados

A propriedade não é herdada. Defina-a na table, tr, td ou th que você deseja afetar (ela cascateia visualmente porque as células a leem de seu próprio estilo calculado — declará-la na table é a abordagem comum).
Ela não tem efeito com border-collapse: collapse, pois as bordas recolhidas são compartilhadas entre as células.
Uma célula com espaço em branco, um  , ou um <img>/elemento vazio não é vazia para esta propriedade. Apenas uma célula sem absolutamente nenhum conteúdo é afetada.
Para controlar o espaço entre células separadas, combine esta propriedade com border-spacing.

Prática

Qual é a função da propriedade 'empty-cells' no CSS?

Define se bordas e fundo são aplicados a células vazias em tabelas.Define a cor das células vazias em tabelas.Define o espaço entre células em tabelas.É usada para ocultar células vazias em tabelas.