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.

/* 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;

border-spacing: inherit;

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.

Valeur initiale0
Applicabilitédes éléments table and inline-table
Héritéeoui
Médiavisuel
Valeur calculéedeux longueurs absolues
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui1841
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple ? ? Oui4 ? ? ?

Voir auss

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, edspeedy, L2o, teoli, Chealer, simonrenoult, FredB, Mgjbot, Fredchat, Kyodev
 Dernière mise à jour par : SphinxKnight,