empty-cells - Propriété CSS
Résumé des caractéristiques de la propriété empty-cells
show
| hide
show
empty-cells
passe d'une valeur à l'autre sans transition.Description.
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
).
Syntaxes 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.
- empty-cells:
initial
; empty-cells:inherit
; empty-cells:revert
; empty-cells:revert-layer
; empty-cells:unset
;La valeur initiale est :
.show
Animation de la propriété 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 |
Manipulation de la propriété empty-cells
par programme.
Le petit tableau ci-dessous servira de démonstration pour les exemples de code donnés plus bas.
La deuxième cellule du tableau est vide ; lorsque la valeur de empty-cells
est modifiée, la bordure et le fond de la cellule
apparaissent ou disparaissent.
A1 | C1 | |
A2 | B2 | C2 |
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.
function setEmptyCells(el) {
el.style['empty-cells']='hide';
// ou
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).
function getEmptyCells(el) {
alert(el.style['empty-cells']);
// ou
alert(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
.
function getCalcEmptyCells(el) {
alert(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).
function setEmptyCells(el) {
$(el).css('empty-cells','show');
// ou
$(el).css('emptyCells','show');
}
Lire la valeur calculée de la propriété empty-cells
avec JQuery.
function getCalcEmptyCells(el) {
alert($(el).css('empty-cells'));
// ou
alert($(el).css('emptyCells'));
}
Simulateur.
Ce tableau contient deux cellules vides. Observez que le contour et le fond des cellules vides disparaissent lorsque
empty-cells
a la valeur hide
.
Lundi | Mardi | Mercredi | Jeudi | Vendredi |
Occupé | Occupé | Occupé |
Prise en charge de empty-cells
par les navigateurs.
empty-cells
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que empty-cells
.
Les spécifications CSS éditées par le W3C sont organisées en modules. empty-cells
fait partie du Module CSS - Tableaux (CSS Table Module). Les définitions suivantes sont également décrites dans ce même module.