Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

empty-cells - Propriété CSS

empty-cells

Résumé des caractéristiques de la propriété empty-cells

Description rapide
Mode d'affichage des cellules vides.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
show | hide
Pourcentages
Ne s'appliquent pas.
Valeur initiale
show
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété empty-cells passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Tableaux
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: Ancienne norme, obsolète

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.

Syntaxe de empty-cellsSchéma syntaxique de la propriété CSS empty-cells (cellules de tableau vides). show show hide hideempty-cells:;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.

A1C1
A2B2C2

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.

empty-cells :
Lundi Mardi Mercredi Jeudi Vendredi
Occupé Occupé Occupé

Prise en charge de empty-cells par les navigateurs.

1
empty-cells
Estimation de la prise en charge en pourcentage du parc actuel.
96%

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.

Propriétés.

Mode d'encadrement des cellules de tableau.
Espacement entre les cellules adjacentes dans un tableau.
Positionne le titre d'un tableau.
Mode de calcul des largeurs de colonnes et de tableaux.