Empty-cells - Propriété CSS
Résumé des caractéristiques de la propriété empty-cells
show | hideshowempty-cells passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de empty-cells.
empty-cellsLes liens du schéma donnent accès à plus de détails
Description de la propriété empty-cells.
La propriété empty-cells définit si les cellules vides d'un tableau doivent s'afficher.
Cela concerne aussi la bordure et l'arrière-plan de la cellule.
Une cellule est considérée comme vide si elle ne contient que des espaces, sauf si la propriété
white-space a la valeur pre, pre-line ou pre-wrap
pour cette cellule, auquel cas un espace est considéré comme un contenu.
D'autre part, un espace insécable ( ) n'est pas considéré comme un blanc et
suffit à "remplir" la cellule.
Attention ! empty-cells n'a d'effet que si la propriété border-collapse n'a pas la valeur
collapse (voir border-collapse).
Valeurs pour empty-cells.
- empty-cells: show;
Valeur par défaut. Les cellules vides et leur bordure sont affichées de la même façon que les cellules avec du contenu.
- empty-cells: hide;
Les cellules vides ne sont pas affichées, de même que leur bordure.
Valeurs communes à toutes les propriétés :
empty-cells: initial (show)
empty-cells: inherit
empty-cells: revert
empty-cells: revertLayer
empty-cells: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Exemple d'animation de empty-cells.
La propriété empty-cells peut être animée. Bien entendu la transition d'une valeur à l'autre sera brutale
puisqu'il ne s'agit pas de valeurs numériques. L'animation se traduira par un clignotement des cellules vides,
sous réserve qu'elles aient une bordure et/ou un arrière-plan non transparent.
| Cellule remplie | Cellule remplie | Cellule remplie |
Accéder à la propriété empty-cells par programme.
Modifier la valeur de empty-cells en Javascript.
Pour modifier la valeur d'une propriété, Javascript reconnaît deux syntaxes, qui sont toutes les deux fournies dans l'exemple.
let el = document.getElementById('id');
el.style['empty-cells'] = 'hide';
// ou
let el = document.getElementById('id');
el.style.emptyCells = 'hide';
Lire en Javascript la valeur de empty-cells.
Cet exemple de code retrouve la valeur de empty-cells si celle-ci a été affectée dans le code HTML, via l'attribut style
de l'élément. Les valeurs affectées via un sélecteur CSS ne sont pas retrouvées (voir pour cela le code suivant qui renvoie la valeur calculée).
let el = document.getElementById('id');
let value = el.style['empty-cells'];
// ou
let el = document.getElementById('id');
let value = el.style.emptyCells;
Lire la valeur calculée de empty-cells en Javascript.
La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. cela peut être la valeur affectée directement (via un sélecteur CSS
ou l'attribut style dans le code HTML), une valeur héritée, ou encore la valeur initiale de la propriété, qui est show
pour empty-cells.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('empty-cells');
Modifier la valeur de la propriété empty-cells avec JQuery.
Comme Javascript, JQuery accepte le nom de la propriété écrit indifféremment en kebab-case (un tiret pour séparer les mots)
ou en camel-case (une majuscule pour séparer les mots).
$('#id').css('empty-cells', 'hide');
// ou
$('#id').css('emptyCells', 'hide');
Lire la valeur calculée de la propriété empty-cells avec JQuery.
let value = $('#id').css('empty-cells');
Autres exemples.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété empty-cells et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de empty-cells, mais dans le cas de
empty-cells cela ne fait aps de différence.
Exemple interactif avec la propriété empty-cells.
Ce tableau contient deux cellules vides. Observez que le contour et le fond des cellules vides disparaissent lorsque empty-cells a la valeur
hide, laissant apparaître le fond gris du tableau.
| Lundi | Mardi | Mercredi | Jeudi | Vendredi |
| Occupé | Occupé | Occupé |
Compatibilité des navigateurs avec empty-cells.
empty-cells qui masque les cellules vides dans un tableau.empty-cellsNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Histoire de la propriété empty-cells.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Introduction de la propriétéempty-cells(CSS version 2.xx).
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Module CSS - Tableaux - Niveau 3
Pas de changement sur la propriétéempty-cells.25 Octobre 2016Document de travail.
Voir aussi, au sujet des tableaux.
La spécification du W3C "Module CSS - Tableaux" regroupe les définitions concernant spécifiquement les tableaux. Il y en finalement assez peu, mais de nombreuses autres propriétés, plus générales, peuvent s'appliquer également aux tableaux : dimensions, marges, etc.