Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
border-spacing
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriétéborder-spacing définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsqueborder-collapse vautseparate). 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.
Exemple interactif
border-spacing: 0;border-spacing: 5px;border-spacing: 5px 1rem;<section> <table> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> </tr> </table></section>table { width: 15rem; table-layout: fixed;}td { border: 5px solid; border-color: crimson dodgerblue; padding: 0.75rem;}La valeur deborder-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 duborder-spacing approprié (horizontal ou vertical) et dupadding 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
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | des élémentstable andinline-table |
| Héritée | oui |
| Valeur calculée | deux longueurs absolues |
| Type d'animation | discrète |
Syntaxe formelle
border-spacing =
<length>{1,2}
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> <tr> <td>Ces cellules</td> <td>sont séparées par 5px</td> <td>tout autour.</td> </tr></table><br /><table> <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
| Specification |
|---|
| Cascading Style Sheets Level 2 # separated-borders |
Compatibilité des navigateurs
Voir aussi
border-collapseborder-style- L'élément HTML
<table>