Empty-cells - Propriété CSS

Schéma de la syntaxe de empty-cells.

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, leur bordure et leur arrière-plan sont affichées de la même façon que les cellules avec du contenu.

  	Lundi	Mardi	Mercredi
  Midi	Ratatouille	Pates	Salade
  Soir	Restes		Soupe

• empty-cells: hide;

  Les cellules vides ne sont pas affichées, de même que leur bordure, ou leur arrière-plan.

  	Lundi	Mardi	Mercredi
  Midi	Ratatouille	Pates	Salade
  Soir	Restes		Soupe

• empty-cells: initial; (show) empty-cells: inherit; empty-cells: revert; empty-cells: revert-layer; empty-cells: revert-rule; empty-cells: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, revert-rule, 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.

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');

Lire ou 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).


// Lire la valeur :
$('#id').prop('empty-cells');
// Écrire la valeur :
$('#id').prop('empty-cells', 'hide');
$('#id').prop('{empty-cells': '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 pas de différence, sauf si vous entrez une valeur différente de show ou hide.

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.

Compatibilité des navigateurs avec empty-cells.

1

Propriété
empty-cells

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Samsung Internet

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété empty-cells.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant empty-cells Introduction de la propriété empty-cells (CSS version 2.xx).
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Tableaux - Niveau 3

  Ce module de spécification définit un système de mise en page basé sur un tableau, optimisé pour le rendu des données tabulaires. Dans ce modèle de disposition, chaque cellule est attribué à une intersection entre un ensemble de lignes consécutives et un ensemble de colonnes consécutives, eux-mêmes générés à partir de la structure de la table et dimensionnés en fonction de leur contenu.

  Concernant empty-cells Pas de changement sur la propriété empty-cells.
  

  25 Octobre 2016

  Document 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.

Propriétés :