La empty-cellspropriété en CSS sélectionne des cellules de tableau vides dans le but de spécifier s'il faut ou non afficher des bordures et des arrière-plans sur celles-ci. En d'autres termes, il indique au navigateur s'il doit ou non dessiner des bordures autour d'une cellule de tableau ou remplir l'arrière-plan lorsque cette cellule ne contient aucun contenu. C'est un peu comme appliquer une visibilitypropriété sur des cellules de tableau vides.
table ( empty-cells: show; )Valeurs
La empty-cellspropriété a deux valeurs principales:
show: affiche une bordure et un arrière-plan sur une cellule vide.hide: n'affiche pas de bordure ou d'arrière-plan sur une cellule vide.
Les valeurs globales suivantes sont également acceptées:
inherit: hérite de la valeur de propriété de l'élément parent.initial: utilisez la valeur par défaut définie pour la propriété.unset: réinitialise la propriété à sa valeur héritée.
Quand l'utiliser
C'est une propriété intéressante car elle donne au CSS la possibilité de vérifier le balisage HTML pour le contenu à l'intérieur d'une table et de répondre en conséquence. Nous ne considérons normalement pas CSS comme un langage dynamique, mais c'est une instance où il se rapproche assez.
Un bon cas d'utilisation empty-cellspourrait être une situation dans laquelle vous ne savez peut-être pas si une table contiendra ou non des points de données vides et vous décidez de les masquer. Auparavant, les tableaux étaient la manière de facto de construire les mises en page de pages Web, ce qui pouvait donc être un outil utile pour afficher et masquer des éléments lorsque des tableaux sont utilisés pour la présentation ou lorsque des éléments contiennent la display: tablepropriété.
Démo
Voir le Pen mPLVzB par CSS-Tricks (@ css-tricks) sur CodePen.
En rapport
displayvisibility:empty
Plus d'information
- Spécification CSS niveau 2
- Référence MDN
- Démo SitePoint sur CodePen
- Démonstration des couches de table et de la transparence sur CodePen
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8,0 | 1.0 | 3.1 |