La propriété border-spacing
définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque border-collapse
vaut separate
). Cette propriété est équivalente à l'attribut HTML déprécié cellspacing
mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
La valeur de border-spacing
est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du border-spacing
approprié (horizontal ou vertical) et du padding
correspondant (top, right, bottom ou left).
Note : La propriété border-spacing
équivaut à l'attribut déprécié cellspacing
de l'élément <table>
, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.
Syntaxe
/* Une valeur de longueur */
/* Type <length> */
border-spacing: 2px;
/* La première valeur indique */
/* l'espacement horizontal et */
/* la seconde le vertical. */
border-spacing: 1cm 2em;
/* Valeurs globales */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;
La propriété border-spacing
peut être définie avec une ou deux valeurs :
Valeurs
length
- Une valeur de longueur (
<length>
qui décrit l'espacement entre les cellules.
Syntaxe formelle
Exemples
CSS
table {
border-collapse: separate;
border: 1px solid #000;
}
td {
border: 1px solid #000;
padding: 5px;
}
.unevaleur {
border-spacing: 5px;
}
.deuxvaleurs {
border-spacing: 5px 10px;
}
HTML
<table class="unevaleur">
<tr>
<td>Ces cellules</td>
<td>sont séparées par 5px</td>
<td>tout autour.</td>
</tr>
</table>
<br />
<table class="deuxvaleurs">
<tr>
<td>Ces cellules</td>
<td>sont séparées par 5px d'écart horizontal</td>
<td>et 10px d'écart vertical.</td>
</tr>
</table>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Level 2 (Revision 1) La définition de 'border-spacing' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | 0 |
---|---|
Applicabilité | des éléments table and inline-table |
Héritée | oui |
Valeur calculée | deux longueurs absolues |
Type d'animation | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir auss
border-collapse
border-style
- L'élément HTML
<table>