empty-cells

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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

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

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é.

Définition formelle

Valeur initialeshow
Applicabilitééléments qui sont des cellules de tableau
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrè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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
empty-cells

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support