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

empty-cells: show;

empty-cells: hide;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <tr>
      <th>Client Name</th>
      <th>Age</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 #a19;
  padding: 0.25rem 0.5rem;
}

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

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