W3docs
es
Iniciar sesión

Propiedad empty-cells de CSS

The empty-cells CSS property defines whether borders and background are shown or not. See the values and try examples with each of them.

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 inicialshow
Se aplica aelementos table-cell
HeredableNo.
AnimableNo
VersiónCSS2
Sintaxis DOMobject.style.emptyCells = "hide";

Sintaxis

Sintaxis de la propiedad empty-cells de 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

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

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

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

Resultado

Propiedad CSS empty-cells con ambos valores

Valores

ValorDescripciónProbar
showIndica que los bordes y el fondo de las celdas vacías se mostrarán. Este es el valor predeterminado de esta propiedad.Probar »
hideIndica que los bordes y el fondo de las celdas vacías no se mostrarán.Probar »
initialHace que la propiedad utilice su valor predeterminado.Probar »
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

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