empty-cells
Baseline
Widely available
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é empty-cells définit la façon dont l'agent utilisateur doit afficher les bordures et l'arrière-plan des cellules d'un tableau (<table>) qui n'ont aucun contenu visible.
Exemple interactif
empty-cells: show;
empty-cells: hide;
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<th>Client Name</th>
<th>Age</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 #a19;
padding: 0.25rem 0.5rem;
}
Cette propriété est uniquement appliquée lorsque border-collapse vaut separate.
Syntaxe
css
/* Valeurs avec mot-clé */
empty-cells: show;
empty-cells: hide;
/* Valeurs globales */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;
Cette propriété se définit avec l'un des mots-clés suivants.
Valeurs
Définition formelle
| Valeur initiale | show |
|---|---|
| Applicabilité | éléments qui sont des cellules de tableau |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
empty-cells =
show |
hide
Exemples
HTML
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
css
.table_1 {
empty-cells: show;
}
.table_2 {
empty-cells: hide;
}
td,
th {
border: 1px solid #999;
padding: 0.5rem;
}
Résultat
Spécifications
| Specification |
|---|
| Cascading Style Sheets Level 2 # empty-cells |
Compatibilité des navigateurs
Chargement…