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

css

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

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

Afficher ou masquer les cellules vides de tableau

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

Résultat

Spécifications

Specification
Cascading Style Sheets Level 2 # empty-cells

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 3 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content