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é CSS border-spacing permet de définir la distance entre les bordures des cellules adjacentes dans un élément HTML <table>. Cette propriété s'applique uniquement lorsque border-collapse vaut separate.
Exemple interactif
border-spacing: 0;
border-spacing: 5px;
border-spacing: 5px 1rem;
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<td>Cellule 1.1</td>
<td>Cellule 1.2</td>
</tr>
<tr>
<td>Cellule 2.1</td>
<td>Cellule 2.2</td>
</tr>
<tr>
<td>Cellule 3.1</td>
<td>Cellule 3.2</td>
</tr>
</table>
</section>
table {
width: 15rem;
table-layout: fixed;
}
td {
border: 5px solid;
border-color: crimson dodgerblue;
padding: 0.75rem;
}
Syntaxe
/* Caleur de type <length> */
border-spacing: 2px;
/* longeur horizontale | longeur verticale */
border-spacing: 1cm 2em;
/* Valeurs globales */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;
La propriété border-spacing peut être définie avec une ou deux valeurs.
- Lorsque une valeur
<length>est indiquée, elle définit à la fois l'espacement horizontal et vertical entre les cellules. - Lorsque deux valeurs
<length>sont indiquées, la première valeur définit l'espacement horizontal entre les cellules (c'est-à-dire l'espace entre les cellules des colonnes adjacentes), et la seconde valeur définit l'espacement vertical entre les cellules (c'est-à-dire l'espace entre les cellules des lignes adjacentes).
Valeurs
<length>-
La taille de l'espacement en tant que valeur fixe.
Définition formelle
| 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 |
Syntaxe formelle
border-spacing =
<length>{1,2}
Exemples
Espacer et ajouter une marge aux cellules de tableau
Cet exemple applique un espacement de .5em verticalement et de 1em horizontalement entre les cellules d'un tableau. Remarquez que, sur les bords extérieurs, les valeurs de padding du tableau s'ajoutent aux valeurs de border-spacing.
HTML
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
CSS
table {
border-spacing: 1em 0.5em;
padding: 0 2em 1em 0;
border: 1px solid orange;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
Résultat
Spécifications
| Specification |
|---|
| Cascading Style Sheets Level 2 # separated-borders |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
border-collapse,border-style - La propriété
border-spacingmodifie l'apparence de l'élément HTML<table>. - Le module de tableau CSS