Propriété CSS border-collapse

❮ Précédent Suivant ❯

La propriété CSS border-collapse spécifie si les bordures de tableau sont partagées (comme une seule bordure) ou éffondrées.

Quand les cellules sont éffondrés, la valeur de border-style est "inset", cela se comporte comme "groove", et "outset" se comporte comme "ridge". Quand les cellules sont séparés, la distence entre eux est spécifiée par la propriété border-spacing.

Valeur initiale	separate
Appliquée à	Éléments de tableau et de tableau en ligne.
Héritée	Oui.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.borderCollapse = "collapse";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété border-collapse</h2>
    <p>Ici la valeur "collapse" est définie pour la propriété border-collapse.</p>
    <table>
      <thead>
        <tr>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple si-dessous, vous pouvez voyer que quand on utilise "border-collapse: separate", la propriété border-collapse peut définit une espace entre les cellules et quand on utilise "border-collapse: collapse", la propriété border-collapse n'a aucun effet.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>
    <h2>Exemple de la propriété border-collapse </h2>
    <h3>border-collapse: separate;</h3>
    <p>Quand on utilise "border-collapse: separate", la propriété border-spacing peut être utilisée pour définir l'espace entre les cellules.</p>
    <table id="table1">
      <thead>
        <tr>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
      </tbody>
    </table>
    <h3>border-collapse: collapse;</h3>
    <p>When using the "border-collapse: collapse", the border-spacing property has no effect.</p>
    <table id="table2">
      <thead>
        <tr>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
separate	Chaque cellule a ses propres bordures, donc c'est séparé. C'est la valeur initiale de cette propriété.
collapse	Les cellules partagent ses bordures.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.