Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Propriété CSS empty-cells
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS empty-cells permet de définir si les bordures et l'arrière-plan apparaissent autour des cellules <table> qui n'ont pas de contenu visible.
Cette propriété n'a d'effet que lorsque la propriété border-collapse vaut separate.
Exemple interactif
empty-cells: show;
empty-cells: hide;
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<th>Nom du client</th>
<th>Âge</th>
</tr>
<tr>
<td></td>
<td>25</td>
</tr>
<tr>
<td>Louise Q.</td>
<td></td>
</tr>
<tr>
<td>Owen B.</td>
<td></td>
</tr>
<tr>
<td>Stan L.</td>
<td>71</td>
</tr>
</table>
</section>
th,
td {
border: 2px solid #aa1199;
padding: 0.25rem 0.5rem;
}
Syntaxe
/* Valeurs avec un mot-clé */
empty-cells: show;
empty-cells: hide;
/* Valeurs globales */
empty-cells: inherit;
empty-cells: initial;
empty-cells: revert;
empty-cells: revert-layer;
empty-cells: unset;
La propriété empty-cells se définit avec l'un des mots-clés listés ci-dessous.
Valeurs
Définition formelle
| Valeur initiale | show |
|---|---|
| Applicabilité | éléments qui sont des cellules de tableau |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
empty-cells =
show |
hide
Exemples
Afficher ou masquer les cellules vides de tableau
HTML
<table class="table_1">
<tr>
<td>Jean</td>
<td>Biche</td>
</tr>
<tr>
<td>Alice</td>
<td></td>
</tr>
</table>
<table class="table_2">
<tr>
<td>Jean</td>
<td>Biche</td>
</tr>
<tr>
<td>Alice</td>
<td></td>
</tr>
</table>
CSS
.table_1 {
empty-cells: show;
}
.table_2 {
empty-cells: hide;
}
td,
th {
border: 1px solid gray;
padding: 0.5rem;
}
Résultat
Spécifications
| Spécification |
|---|
| Cascading Style Sheets Level 2 # empty-cells |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- La propriété
border-collapse - Apprendre : Mise en forme des tableaux
- Le module des tableaux CSS
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.