Propriété CSS empty-cells

La propriété empty-cells contrôle si les bordures et l'arrière-plan sont affichés ou masqués sur les cellules vides d'un tableau. Notez que les cellules ne contenant que des espaces blancs ne sont pas considérées comme vides par cette propriété.

Cette propriété s'applique aux tableaux dont la propriété border-collapse a la valeur "separate".

La valeur par défaut de la propriété empty-cells est show.

Valeur initiale	show
S'applique à	éléments de type table-cell
Héritée	Non.
Animable	Non
Version	CSS2
Syntaxe DOM	object.style.emptyCells = "hide";

Syntaxe

Syntaxe de la propriété CSS empty-cells

css

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

html

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

Try it Yourself »

La propriété empty-cells contrôle si les bordures et les arrière-plans sont rendus sur les cellules vides des tableaux. Vous pouvez l'utiliser lorsqu'un tableau peut contenir des cellules vides, ce qui vous permet de les masquer pour une mise en page plus propre. Cela est particulièrement utile pour les tableaux de présentation où des cellules vides pourraient sinon perturber le design visuel.

Exemple avec les valeurs `hide` et `show` :

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

html

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

Try it Yourself »

Résultat

CSS empty-cells Property with both values

Valeurs

Valeur	Description	Tester »
show	Indique que les bordures et l'arrière-plan des cellules vides seront affichés. Il s'agit de la valeur par défaut de cette propriété.	Tester »
hide	Indique que les bordures et l'arrière-plan des cellules vides ne seront pas affichés.	Tester »
initial	Fait utiliser à la propriété sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

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 des tableaux.Elle définit la couleur des cellules vides des tableaux.Elle définit l'espacement entre les cellules des tableaux.Elle est utilisée pour masquer les cellules vides des tableaux.

Propriété CSS empty-cells ​

Syntaxe ​

Exemple de la propriété empty-cells : ​

Exemple avec les valeurs hide et show : ​

Résultat ​

Valeurs ​