border-spacing

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.

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 :

Avec une valeur de type <length>, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.
Avec deux valeurs de type <length>, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).

Valeurs

length: Une valeur de longueur (<length> qui décrit l'espacement entre les cellules.

Syntaxe formelle

<length> <length>?

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