Propiedad empty-cells

La propiedad empty-cells le indica al navegador cómo mostrar el fondo y el borde de las celdas td o celdas th de una tabla HTML: mostrarlos o no.

Una celda se considera vacía en los siguientes casos: no hay ningún carácter, la celda contiene solo espacio (uno o varios), salto de línea o tabulación, o si la propiedad visibility está establecida como hidden.

Para hacer que una celda no esté vacía, pero sin texto visible, se utiliza el siguiente truco: en la celda se escribe un espacio de no separación  .

La propiedad no funciona si se establece border-collapse con el valor collapse.

Sintaxis

cssselector {
  empty-cells: show | hide;
}

Valores

Valor por defecto: show.

Ejemplo . Valor show

Actualmente en la tabla algunas celdas están vacías, pero aún así tienen borde y fondo:

html<table>
  <tr>
    <td>celda</td>
    <td></td>
    <td>celda</td>
  </tr>
  <tr>
    <td></td>
    <td>celda</td>
    <td></td>
  </tr>
  <tr>
    <td>celda</td>
    <td>celda</td>
    <td>celda</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: show;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Ejemplo . Valor hide

Y ahora las celdas vacías no tendrán fondo ni borde:

html<table>
  <tr>
    <td>celda</td>
    <td></td>
    <td>celda</td>
  </tr>
  <tr>
    <td></td>
    <td>celda</td>
    <td></td>
  </tr>
  <tr>
    <td>celda</td>
    <td>celda</td>
    <td>celda</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: hide;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Véase también