border-spacing - Propriété CSS
Résumé des caractéristiques de la propriété border-spacing
0
border-spacing
passe progressivement d'une valeur à une autre.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:
;
- 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.
Lundi | Mardi | Mercredi | Jeudi | Vendredi | Samedi | Dimanche |
---|---|---|---|---|---|---|
Réunion | Production | Production | RTT | Production | Week-End |
Exemple interactif.
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.
border-spacing
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.