Propriété CSS border-collapse

La propriété CSS border-collapse définit si les bordures des tableaux sont séparées ou fusionnées en une seule bordure.

Lorsque les cellules sont fusionnées, les bordures adjacentes se combinent en une seule bordure. Lorsque les cellules sont séparées, la distance entre elles est définie par la propriété border-spacing.

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

Syntaxe

Syntaxe de la propriété CSS border-collapse

css

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

html

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

Try it Yourself »

Résultat

Dans l'exemple ci-dessous, vous pouvez voir que lorsque border-collapse: separate est utilisé, la propriété border-spacing définit l'espace entre les cellules. Lorsque border-collapse: collapse est utilisé, border-spacing n'a aucun effet.

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

html

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

Try it Yourself »

Valeurs

Valeur	Description
separate	Chaque cellule possède ses propres bordures. Il s'agit de 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é sur 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.

Pratique

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

Elle définit l'espace entre les cellules d'un tableau.Elle vous 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.

Propriété CSS border-collapse ​

Syntaxe ​

Exemple de la propriété border-collapse : ​

Résultat ​

Exemple de la propriété border-collapse avec les valeurs "separate" et "collapse" : ​

Valeurs ​