Propriété CSS border-collapse

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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.2+ 4.0+


Trouvez-vous cela utile?

Articles Associées