La empty-cellspropiedad en CSS selecciona celdas vacías de la tabla con el propósito de especificar si mostrar o no bordes y fondos en ellas. En otras palabras, le dice al navegador si debe o no dibujar bordes alrededor de una celda de la tabla o completar el fondo cuando esa celda no tiene contenido. Es como aplicar una visibilitypropiedad en celdas de tabla vacías.
table ( empty-cells: show; )Valores
La empty-cellspropiedad tiene dos valores principales:
show: muestra un borde y un fondo en una celda vacía.hide: no muestra un borde o fondo en una celda vacía.
También se aceptan los siguientes valores globales:
inherit: hereda el valor de propiedad del elemento padre.initial: utilice el valor predeterminado definido para la propiedad.unset: restablece la propiedad a su valor heredado.
Cuándo usarlo
Esta es una propiedad interesante porque le da a CSS la capacidad de verificar el marcado HTML para el contenido dentro de una tabla y responder en consecuencia. Normalmente no pensamos en CSS como un lenguaje dinámico, pero esta es una instancia en la que se acerca bastante.
Un buen caso de uso de empty-cellspodría ser una situación en la que es posible que no sepa si una tabla contendrá o no puntos de datos vacíos y decida ocultarlos. Las tablas solían ser la forma de facto en que se construían los diseños de las páginas web, por lo que podría ser una herramienta útil para mostrar y ocultar elementos cuando las tablas se usan para presentaciones o donde los elementos contienen la display: tablepropiedad.
Manifestación
Vea el Pen mPLVzB de CSS-Tricks (@ css-tricks) en CodePen.
Relacionado
displayvisibility:empty
Más información
- Especificación CSS Nivel 2
- Referencia de MDN
- Demostración de SitePoint en CodePen
- Capas de tabla y demostración de transparencia en CodePen
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |