Propriété empty-cells
La propriété empty-cells indique au navigateur
comment afficher le fond et la bordure des cellules
td ou cellules
th vides d'un tableau HTML :
les afficher ou non.
Une cellule est considérée comme vide dans les cas suivants :
il n'y a aucun caractère, la cellule contient
uniquement un espace (un ou plusieurs), un saut
de ligne ou un caractère de tabulation, ou si la propriété
visibility
est définie sur hidden.
Pour rendre une cellule non vide mais sans
texte visible, on utilise l'astuce suivante :
on insère dans la cellule un espace insécable
.
La propriété ne fonctionne pas si la propriété border-collapse
est définie sur la valeur collapse.
Syntaxe
sélecteur {
empty-cells: show | hide;
}
Valeurs
| Valeur | Description |
|---|---|
show |
Le fond et la bordure sont affichés pour une cellule vide. |
hide |
Le fond et la bordure ne sont pas affichés pour une cellule vide. |
Valeur par défaut : show.
Exemple . Valeur show
Actuellement, dans le tableau, certaines cellules sont vides, mais elles ont quand même une bordure et un fond :
<table>
<tr>
<td>cellule</td>
<td></td>
<td>cellule</td>
</tr>
<tr>
<td></td>
<td>cellule</td>
<td></td>
</tr>
<tr>
<td>cellule</td>
<td>cellule</td>
<td>cellule</td>
</tr>
</table>
table {
width: 400px;
empty-cells: show;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Exemple . Valeur hide
Mais maintenant, les cellules vides n'auront pas de fond ni de bordure :
<table>
<tr>
<td>cellule</td>
<td></td>
<td>cellule</td>
</tr>
<tr>
<td></td>
<td>cellule</td>
<td></td>
</tr>
<tr>
<td>cellule</td>
<td>cellule</td>
<td>cellule</td>
</tr>
</table>
table {
width: 400px;
empty-cells: hide;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Voir aussi
-
la pseudo-classe
empty,
qui définit l'apparence d'un élément vide
