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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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