Propiedad CSS empty-cells

La propiedad empty-cells controla si los bordes y el fondo se dibujan en las celdas vacías de una tabla. Una celda vacía es un <td> o <th> que no tiene ningún contenido. Una celda que solo contiene espacios en blanco (un espacio, un   o un salto de línea) sigue considerándose no vacía, por lo que la propiedad no tiene efecto sobre ella.

Esta página explica qué hace empty-cells, cuándo surte efecto realmente, los valores que acepta y los aspectos a tener en cuenta.

Cuándo se aplica la propiedad

empty-cells solo tiene un efecto visible cuando los bordes de las celdas están separados, es decir, cuando la tabla usa border-collapse: separate (el valor predeterminado). Con border-collapse: collapse, las celdas adyacentes comparten un único borde, por lo que no hay un borde o fondo separado que ocultar en una celda vacía, y la propiedad se ignora.

Dado que los valores predeterminados ya son border-collapse: separate y empty-cells: show, las celdas vacías se muestran por defecto y solo se necesita esta propiedad para ocultarlas.

Valor inicial	show
Se aplica a	elementos table-cell
Heredado	No.
Animable	No
Versión	CSS2
Sintaxis DOM	object.style.emptyCells = "hide";

Sintaxis

Sintaxis de la propiedad CSS empty-cells

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

Ejemplo de la propiedad empty-cells:

Ejemplo de la propiedad CSS empty-cells con los valores show y 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>

Pruébalo tú mismo »

En la primera tabla, la celda vacía inferior derecha conserva su borde. En la segunda, empty-cells: hide elimina el borde y el fondo de esa celda por completo, por lo que el espacio aparece en blanco. Usa hide cuando una tabla pueda contener huecos y quieras un aspecto más limpio — por ejemplo, un horario o una cuadrícula de precios donde no todas las celdas están rellenas.

Ejemplo con fondo de color:

Ejemplo de la propiedad CSS empty-cells con los valores hide y 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>

Pruébalo tú mismo »

Cuando se aplica hide, la celda vacía no muestra ni su fondo blanco ni su borde verde — se funde con el fondo azul de la página.

Resultado

Valores

Valor	Descripción	Pruébalo
show	Los bordes y el fondo de las celdas vacías se dibujan. Este es el valor predeterminado.	Pruébalo »
hide	Los bordes y el fondo de las celdas vacías no se dibujan, por lo que las celdas vacías aparecen en blanco.	Pruébalo »
initial	Restablece la propiedad a su valor predeterminado (`show`).	Pruébalo »
inherit	Hereda el valor del elemento padre. Ten en cuenta que `empty-cells` no se hereda de forma predeterminada.

Compatibilidad con navegadores

empty-cells forma parte de CSS2 y es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. No se requieren prefijos de proveedor.

Notas y aspectos a tener en cuenta

La propiedad no se hereda. Establécela en la table, tr, td o th en la que quieras que tenga efecto (se aplica en cascada visualmente porque las celdas la leen desde su propio estilo calculado — declararlo en la table es el enfoque habitual).
No tiene efecto con border-collapse: collapse, porque los bordes contraídos se comparten entre celdas.
Una celda con espacios en blanco, un   o un <img>/elemento vacío no está vacía para esta propiedad. Solo se ve afectada una celda sin ningún contenido.
Para controlar el espacio entre celdas separadas, combina esto con border-spacing.

Práctica

¿Cuál es la función de la propiedad 'empty-cells' en CSS?

Establece si los bordes y el fondo se aplican a las celdas vacías en las tablas.Establece el color de las celdas vacías en las tablas.Define el espacio entre las celdas de las tablas.Se usa para ocultar las celdas vacías en las tablas.