Propriété CSS empty-cells

La propriété empty-cells contrôle si les bordures et l'arrière-plan sont dessinés sur les cellules vides d'un tableau. Une cellule vide est un <td> ou <th> qui ne contient absolument rien. Une cellule contenant uniquement des espaces blancs (un espace, un  , ou un saut de ligne) est toujours considérée comme non vide, de sorte que la propriété n'a aucun effet sur elle.

Cette page explique ce que fait empty-cells, dans quels cas elle prend réellement effet, les valeurs qu'elle accepte et les pièges à éviter.

Quand la propriété s'applique

empty-cells n'a un effet visible que lorsque les bordures des cellules sont séparées — c'est-à-dire lorsque le tableau utilise border-collapse: separate (la valeur par défaut). Avec border-collapse: collapse, les cellules adjacentes partagent une seule bordure, il n'y a donc pas de bordure ou d'arrière-plan distinct pour une cellule vide à masquer, et la propriété est ignorée.

Étant donné que les valeurs par défaut sont déjà border-collapse: separate et empty-cells: show, les cellules vides sont affichées par défaut et vous n'avez besoin de cette propriété que pour les masquer.

Valeur initiale	show
S'applique à	éléments table-cell
Héritage	Non.
Animatable	Non
Version	CSS2
Syntaxe DOM	object.style.emptyCells = "hide";

Syntaxe

Syntaxe de la propriété CSS empty-cells

empty-cells: show | hide | initial | inherit;

Exemple de la propriété empty-cells :

Exemple de la propriété CSS empty-cells avec les valeurs show et hide

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      td,
      th {
        border: 1px solid #1c87c9;
        padding: 0.5rem;
      }
      table {
        border-collapse: separate;
      }
    </style>
  </head>
  <body>
    <h2>Empty-cells property example</h2>
    <p>Here the "show" value is used: </p>
    <table class="show">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
    <br />
    <p>In this table the "hide" value is used:</p>
    <table class="hide">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Dans le premier tableau, la cellule vide en bas à droite conserve sa bordure. Dans le second, empty-cells: hide supprime entièrement la bordure et l'arrière-plan de cette cellule, de sorte que l'emplacement apparaît vide. Utilisez hide lorsqu'un tableau peut contenir des cellules vides et que vous souhaitez un rendu plus propre — par exemple, un planning ou une grille tarifaire où toutes les cases ne sont pas remplies.

Exemple avec un arrière-plan coloré :

Exemple de la propriété CSS empty-cells avec les valeurs hide et show

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      body {
        background: #1c87c9;
        padding: 25px 0;
        color: #fff;
        font-size: 2em;
        text-align: center;
      }
      table {
        border-collapse: separate;
      }
      td {
        background: #fff;
        border: 1px solid #8ebf42;
        padding: 10px 15px;
        color: green;
      }
    </style>
  </head>
  <body>
    <p>The empty cells are shown</p>
    <table class="show">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
    <p>The empty cells are hidden</p>
    <table class="hide">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez vous-même »

Lorsque hide est appliqué, la cellule vide n'affiche ni son arrière-plan blanc ni sa bordure verte — elle se fond dans l'arrière-plan bleu de la page.

Résultat

Valeurs

Valeur	Description	Essayer
show	Les bordures et l'arrière-plan des cellules vides sont dessinés. Il s'agit de la valeur par défaut.	Essayer »
hide	Les bordures et l'arrière-plan des cellules vides ne sont pas dessinés, les cellules vides apparaissent donc vides.	Essayer »
initial	Réinitialise la propriété à sa valeur par défaut (`show`).	Essayer »
inherit	Hérite de la valeur de l'élément parent. Notez que `empty-cells` n'est pas héritée par défaut.

Compatibilité des navigateurs

empty-cells fait partie de CSS2 et est prise en charge par tous les navigateurs modernes, notamment Chrome, Firefox, Safari, Edge et Opera. Aucun préfixe propriétaire n'est nécessaire.

Remarques et pièges

La propriété n'est pas héritée. Définissez-la sur l'élément table, tr, td ou th sur lequel vous souhaitez qu'elle s'applique (elle se propage visuellement car les cellules la lisent depuis leur propre style calculé — la déclarer sur table est l'approche habituelle).
Elle n'a aucun effet avec border-collapse: collapse, car les bordures fusionnées sont partagées entre les cellules.
Une cellule contenant des espaces blancs, un   ou un <img>/élément vide n'est pas vide pour cette propriété. Seule une cellule sans aucun contenu est affectée.
Pour contrôler l'espace entre les cellules séparées, associez cette propriété à border-spacing.

Pratique

Quelle est la fonction de la propriété 'empty-cells' en CSS ?

Elle définit si les bordures et l'arrière-plan sont appliqués aux cellules vides dans les tableaux.Elle définit la couleur des cellules vides dans les tableaux.Elle définit l'espace entre les cellules dans les tableaux.Elle est utilisée pour masquer les cellules vides dans les tableaux.