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 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.

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>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 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

css

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

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

CSS

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

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

Specification
Cascading Style Sheets Level 2 # separated-borders

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 1 nov. 2025 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content