La propriété CSS border-collapse

La propriété CSS border-collapse définit si les bordures des cellules d'un tableau sont maintenues séparées ou fusionnées en une seule bordure commune.

Par défaut, chaque cellule d'un <table> dessine sa propre bordure. La limite entre deux cellules adjacentes correspond donc en réalité à deux bordures côte à côte (plus un éventuel espace entre elles), ce qui donne souvent l'apparence d'une ligne épaisse et doublée. La propriété border-collapse vous permet de choisir entre cet aspect classique de tableur et une grille plus épurée à ligne unique.

separate (valeur par défaut) — chaque cellule conserve ses propres bordures. La distance entre les bordures des cellules adjacentes est contrôlée par la propriété border-spacing.
collapse — les bordures adjacentes fusionnent en une seule. Le navigateur choisit la bordure « gagnante » pour chaque bord partagé en fonction de la largeur, du style et de la couleur, et border-spacing est ignoré.

Cette propriété n'affecte que les éléments <table> et display: inline-table, et c'est l'un des rares cas où les bordures définies sur un <table>, ses lignes et ses cellules interagissent entre elles.

Valeur initiale	separate
S'applique à	Les éléments table et inline-table.
Héritage	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.borderCollapse = "collapse";

Syntaxe

Syntaxe de la propriété CSS border-collapse

border-collapse: separate | collapse | initial | inherit | unset;

Exemple de la propriété border-collapse :

Exemple de la propriété CSS border-collapse avec la valeur collapse

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 50px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-collapse property example</h2>
    <p>Here the "collapse" value is set for the border-collapse property.</p>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez vous-même »

Résultat

Dans l'exemple ci-dessous, vous pouvez voir le contraste directement. Lorsque border-collapse: separate est utilisé, la propriété border-spacing définit l'écart entre les cellules. Lorsque border-collapse: collapse est utilisé, border-spacing n'a aucun effet — les cellules se touchent et leurs bordures fusionnent.

Exemple de la propriété border-collapse avec les valeurs « separate » et « collapse » :

Exemple de la propriété CSS border-collapse avec la valeur separate

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid #ccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 30px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
      #table1 {
        border-collapse: separate;
        border-spacing: 10px;
      }
      #table2 {
        border-collapse: collapse;
        border-spacing: 10px; /* ignored when border-collapse is collapse */
      }
    </style>
  </head>
  <body>
    <h1>Border-collapse property example</h1>
    <h2>border-collapse: separate;</h2>
    <p>When using the "border-collapse: separate", the border-spacing property can be used to define the space between the cells.</p>
    <table id="table1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
    <h2>border-collapse: collapse;</h2>
    <p>When using the "border-collapse: collapse", the border-spacing property has no effect.</p>
    <table id="table2">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
separate	Chaque cellule possède ses propres bordures. C'est la valeur par défaut. La propriété border-spacing contrôle la distance entre les cellules.
collapse	Les cellules partagent leurs bordures. Les bordures adjacentes fusionnent en une seule bordure.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.
unset	Réinitialise la propriété à sa valeur initiale.

Fonctionnement du modèle de fusion

Lorsque border-collapse: collapse est défini, chaque bord partagé ne peut afficher qu'une seule bordure. Le navigateur doit donc résoudre les conflits entre les bordures déclarées sur le tableau, la ligne et les deux cellules adjacentes. Les règles, dans l'ordre, sont les suivantes :

Une bordure avec border-style: hidden l'emporte toujours et supprime entièrement le bord.
Une bordure plus large l'emporte sur une bordure plus étroite.
Si les largeurs sont égales, les styles sont classés ainsi : double > solid > dashed > dotted > ridge > outset > groove > inset.
Si la largeur et le style sont encore à égalité, la bordure appartenant à l'élément le plus proche de la cellule l'emporte (la cellule prime sur la ligne, qui prime sur le tableau).

C'est pourquoi, en mode fusionné, définir des largeurs de bordure différentes sur <td> et <table> peut ne pas produire le résultat attendu — seule la bordure gagnante est dessinée.

Quand l'utiliser

Utilisez collapse pour la plupart des tableaux de données. Cela produit une grille propre à ligne unique, telle que les utilisateurs la connaissent des tableurs, et c'est le moyen le plus simple d'éviter les bordures doublées.
Conservez separate lorsque vous souhaitez un espacement visible entre les cellules (définissez border-spacing), des coins arrondis sur les cellules, ou des bordures par cellule qui ne fusionnent pas.
Notez que border-radius sur les cellules n'a un effet visible qu'en mode separate ; les bordures fusionnées ne peuvent pas être arrondies.

Pratique

Que fait la propriété 'border-collapse' en CSS ?

Elle définit l'espace entre les cellules d'un tableau.Elle permet de décider si les bordures du tableau doivent fusionner en une seule bordure ou s'afficher comme des bordures séparées.Elle ajuste la taille du tableau.Elle est utilisée pour spécifier la couleur des bordures du tableau.Elle détermine le style des quatre bordures d'une cellule de tableau.

Ressources connexes

La propriété CSS border-spacing — définit l'écart entre les cellules lorsque border-collapse: separate est utilisé.
La propriété CSS empty-cells — affiche ou masque les bordures des cellules vides (s'applique uniquement en mode separate).
La propriété CSS table-layout — contrôle la façon dont le navigateur dimensionne les colonnes du tableau.
La propriété CSS border — le raccourci pour la largeur, le style et la couleur de la bordure d'un élément.