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 :

border-spacing - Propriété CSS

border-spacing

Résumé des caractéristiques de la propriété border-spacing

Description rapide
Espacement entre les cellules adjacentes dans un tableau.
Statut
Standard
Type de valeur
Dimension+ {1-2}
Pourcentages
Ne s'appliquent pas.
Valeur initiale
0
Héritée par défaut
Oui
Type d'animation
Computed value : lors d'une animation, la propriété border-spacing passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Tableaux
Références (W3C)
Statut du document:: WD (document de travail)

Description de la propriété border-spacing.

border-spacing définit l'espace entre les cellules d'un tableau. Cette propriété n'a d'effet que si border-collapse a la valeur separate.

Sur le pourtour du tableau, l'espace entre les cellules s'ajoute aux marges intérieures du tableau (padding).

Le navigateur peut être amené à modifier les dimensions du tableau ou celles des cellules pour appliquer la valeur de border-spacing.

Syntaxes pour border-spacing.

length est une valeur numérique suivie d'une unité de dimension. La valeur peut figurer une ou deux fois dans la syntaxe avec un espace de séparation.

border-spacing:
Schéma syntaxique de la propriété border-spacingSyntaxe de border-spacing, espacement des cellules d'un tableau. length length {1,2} {1,2}
;
  • border-spacing: 5px;

    Une valeur positive ou nulle, suivie d'une unité de dimension (voir les unités CSS de dimension). L'espace entre les cellules du tableau sera fixé à cette valeur.
    Les pourcentages ne sont pas autorisés.

  • border-spacing: 5px 10px;

    Deux valeurs positives ou nulles, suivies de leur unité de dimension.
    La première valeur définit l'espace horizontal entre deux cellules adjacente du tableau, et la deuxième définit l'espace vertical.

  • border-spacing: initial; border-spacing: inherit; border-spacing: revert; border-spacing: revert-layer; border-spacing: unset;

    La valeur initiale est : 0.

Animation de la propriété border-spacing.

border-spacing peut être animée mais l'animation risque d'être peu fluide car elle suppose des calculs lourds sur tout le tableau. D'autre part, les éléments qui suivent le tableau doivent être repositionnés en fonction de l'agrandissement ou du rétrécissement du tableau, ce qui ralentit encore l'animation. Pour éviter ce deuxième problème, le tableau ci-dessous a été positionné en absolu.

LundiMardiMercrediJeudiVendrediSamediDimanche
RéunionProductionProductionRTTProductionWeek-End

 

 

 

Exemple interactif.

border-spacing :

Prise en charge par les navigateurs.

Aucun problème de compatibilité à signaler. La propriété border-spacing est bien gérée par tous les navigateurs actuels.

1
border-spacing
Estimation de la prise en charge en pourcentage du parc actuel.
95%

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 border-spacing.

Les spécifications CSS éditées par le W3C sont organisées en modules. border-spacing 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.
Positionne le titre d'un tableau.
Mode d'affichage des cellules vides.
Mode de calcul des largeurs de colonnes et de tableaux.