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éCSSborder-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 lorsqueborder-collapse vautseparate.

Exemple interactif

border-spacing: 0;

border-spacing: 5px;

border-spacing: 5px 1rem;

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

css

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

Lorsqueune valeur<length> est indiquée, elle définit à la fois l'espacement horizontal et vertical entre les cellules.
Lorsquedeux 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 descolonnes adjacentes), et la seconde valeur définit l'espacement vertical entre les cellules (c'est-à-dire l'espace entre les cellules deslignes adjacentes).

Valeurs

<length>: La taille de l'espacement en tant que valeur fixe.

Définition formelle

Valeur initiale	`0`
Applicabilité	des éléments`table` et`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 de1em horizontalement entre les cellules d'un tableau. Remarquez que, sur les bords extérieurs, les valeurs depadding du tableau s'ajoutent aux valeurs deborder-spacing.

HTML

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

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