empty-cells

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 qui n'ont aucun contenu visible.

Syntaxe

/* Valeurs avec mot-clé */
empty-cells: show;
empty-cells: hide;

/* Valeurs globales */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;

Valeurs

show

Un mot-clé indiquant que les bordures et l'arrière-plan doivent être dessinés comme pour les cellules normales.

hide

Un mot-clé indiquant qu'aucune bordure ou arrière-plan ne doit être dessiné.

Syntaxe formelle

show | hide

Exemples

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 #999;
  padding: 0.5rem;
}

Résultat

Spécifications

Compatibilité des navigateurs