Propriété CSS empty-cells

❮ Précédent Suivant ❯

La propriété empty-cells est utilisée pour définir si les bordures d'affichage et l'arrière-plan doivent être montrés sur les cellules vides dans le tableau ou non.

Cette propriété s'applique aux tableaux qui ont la propriété border-collapse avec la valeur "separate".

Pour la propriété border-collapse la valeur initiale est "show".

Valeur initiale	show
Appliquée à	Éléments de la cellule de tableau
Héritée	Oui.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.emptyCells = "hide";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .show {
      empty-cells: show;
      }
      .hide {
      empty-cells: hide;
      }
      td, th {
      border: 1px solid #1c87c9;
      padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété empty-cells</h2>
    <p>Ici on a utilisée la valeur "show": </p>
    <table class="show">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
    <br>
    <p>Dans cette table, on a utilisée la valeur "hide" :</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!

Voyons un exemple illustré avec les valeurs "hide" et "show":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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 {
      display: flex;
      justify-content: center;
      }
      td {
      background: #fff;
      border: 1px solid #8ebf42;
      padding: 10px 15px;
      color: green;
      }
    </style>
  </head>
  <body>
    <p>Les cellules vides sont affichées</p>
    <table class="show">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
    <p>Les cellules vides sont masquées</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!

Valeurs

Valeur	Description
show	Cela signifie que les bordure et l'arrière-plan sur les cellules vides seront montrés. C'est la valeur initiale de cette propriété.
hide	Cela signifie que les bordure et l'arrière-plan sur les cellules vides ne seront pas montrés.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.