MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

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.

/* Un 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 pour le bord extérieur du tableau où la distance entre la bordure du tableau et la première/dernière ligne/colonne est la somme des border-spacing et du padding.

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é Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.7 ou moins) (Oui) 8.0 4.0 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple ? 1.0 (1.9.2) (Oui) ? ? ?

Voir auss

Étiquettes et contributeurs liés au document

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