Propiedad empty-cells

Ejemplos de uso

La propiedad empty-cells permite controlar la visualización de las celdas vacías de una tabla. Por defecto, los navegadores muestran todas las celdas de las tablas, independientemente de su contenido:

El valor por defecto de la propiedad empty-cells es show, que hace que se muestren siempre todas las celdas. No obstante, si accedes al ejemplo anterior con el navegador Internet Explorer 7 o sus versiones anteriores, no se visualizan las celdas vacías, tal y como se muestra en la siguiente imagen:

Por otra parte, el valor hide hace que se oculten las celdas vacías. Si en la misma tabla del ejemplo anterior se establece la propiedad empty-cells: hide, el resultado es el siguiente:

table {
  empty-cells: hide;
  border-collapse: separate;
  border-spacing: 5px;
}

Las celdas ocultas con empty-cells no muestran ningún borde, ni color de fondo ni contenido, pero siguen ocupando sitio. De esta forma, la estructura de la tabla y la posición del resto de las celdas no se ven afectadas por ocultar las celdas vacías.

Para que se oculten las celdas vacías mediante la propiedad empty-cells: hide, la tabla debe utilizar obligatoriamente el modelo de bordes separate. El siguiente ejemplo modifica el anterior para que la tabla utilice el modelo de bordes collapse:

table {
  empty-cells: hide;
  border-collapse: collapse;
}

Aunque la tabla anterior utiliza la propiedad empty-cells: hide, todas las celdas vacías se visualizan igual que el resto de celdas. El motivo es que la tabla utiliza el modelo de bordes collapse.

Según el estándar CSS 2.1, una celda vacía es aquella que no tiene ningún contenido o que su contenido está formado sólo por espacios en blanco. En el siguiente ejemplo, la segunda celda de la primera fila sólo tiene espacios en blanco y la segunda celda de la segunda fila tiene los mismos espacios en blanco pero escritos mediante la entidad HTML  

A continuación se muestra el código HTML del ejemplo anterior:

<table style="empty-cells: hide; border-collapse: separate; border-spacing: 5px;" summary="Descripción de la tabla y su contenido">
<tbody>
  <tr>
    <td>Celda 1 - 1</td>
    <td>   </td>
    <td>Celda 1 - 3</td>
  </tr>
  <tr>
    <td>Celda 2 - 1</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>Celda 2 - 3</td>
  </tr>
</tbody>
</table>

Si todas las celdas de una misma fila están vacías y se indica la propiedad empty-cells: hide, la altura de la fila es cero y por tanto, en su lugar sólo se muestra uno de los dos border-spacing verticales de esa fila.

En la siguiente tabla, la segunda fila sólo está formada por celdas vacías, por lo que su altura debe ser cero y el navegador también debe ajustar la separación vertical entre celdas:

Lamentablemente, la mayoría de navegadores actuales no cumplen este comportamiento. Aunque algunos navegadores asignan a la segunda fila una altura igual a cero, no ajustan la separación vertical entre filas. Según el estándar CSS 2.1, el ejemplo anterior debe visualizarse como muestra la siguiente imagen: