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.

Cette propriété est uniquement appliquée lorsque border-collapse vaut separate.

Syntaxe

/* 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

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

Spécification État Commentaires
CSS Level 2 (Revision 1)
La définition de 'empty-cells' dans cette spécification.
Recommendation Définition initiale.

Valeur initialeshow
Applicabilitééléments qui sont des cellules de tableau
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 8Opera Support complet 4Safari Support complet 1.2WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 3.1Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,