Propiedad empty-cells de CSS

La propiedad empty-cells controla si los bordes y el fondo se muestran u ocultan en las celdas vacías de una tabla. Ten en cuenta que las celdas que contienen solo espacios en blanco no se consideran vacías según esta propiedad.

Esta propiedad se aplica a tablas que tienen una propiedad border-collapse con el valor "separate".

El valor predeterminado para la propiedad empty-cells es show.

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

Sintaxis

Sintaxis de la propiedad empty-cells de CSS

css

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

html

<!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>

Try it Yourself »

La propiedad empty-cells controla si los bordes y los fondos se renderizan en las celdas vacías de una tabla. Puedes usarla cuando una tabla pueda contener celdas vacías, lo que te permite ocultarlas para obtener un diseño más limpio. Esto es especialmente útil para tablas de presentación donde las celdas vacías podrían alterar el diseño visual.

Ejemplo con los valores `hide` y `show`:

Ejemplo de la propiedad CSS empty-cells con los valores hide y show

html

<!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>

Try it Yourself »

Resultado

Propiedad CSS empty-cells con ambos valores

Valores

Valor	Descripción	Probar
show	Indica que los bordes y el fondo de las celdas vacías se mostrarán. Este es el valor predeterminado de esta propiedad.	Probar »
hide	Indica que los bordes y el fondo de las celdas vacías no se mostrarán.	Probar »
initial	Hace que la propiedad utilice su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento padre.

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 en las tablas.Se utiliza para ocultar las celdas vacías en las tablas.

Propiedad empty-cells de CSS ​

Sintaxis ​

Ejemplo de la propiedad empty-cells: ​

Ejemplo con los valores hide y show: ​

Resultado ​

Valores ​