La propriété border-collapse détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées.

Le modèle des bordures séparées est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété border-spacing.

Le modèle des bordures fusionnées permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs inset et outset de border-style se comportent respectivement comme groove et ridge.

Syntaxe

/* Valeurs avec un mot-clé */
border-collapse: collapse;
border-collapse: separate;

/* Valeurs globales */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;

La propriété border-collapse est définie avec un seul mot-clé parmi ceux définis ci-après.

Valeurs

collapse
Un mot-clé qui indique que le modèle des bordures fusionnées doit être utilisé.
separate
Un mot-clé qui indique que le modèle des bordures séparées doit être utilisé. C'est la valeur par défaut.

Syntaxe formelle

collapse | separate

Exemples

CSS

.collapse {
  border-collapse: collapse;
}
.separate {
  border-collapse: separate;
}
table {
  display: inline-table;
  margin: 1em;
  border: dashed 6px;
  border-width: 6px;
}
table th, table td {
  border: solid 3px;
}
.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ie { border-color: blue gold; }
.tr { border-color: aqua; }
.sa { border-color: silver blue; }
.wk { border-color: gold blue; }
.ch { border-color: red yellow green blue; }
.bk { border-color: navy blue teal aqua; }
.op { border-color: red; }

HTML

<table class="separate">
  <caption><code>border-collapse: separate</code></caption>
  <tbody>
    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
    </tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
    </tr>
    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
    </tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
    </tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
    </tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption><code>border-collapse: collapse</code></caption>
  <tbody>
    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
    </tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
    </tr>
    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
    </tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
    </tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
    </tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>

Résultat

Spécifications

Spécification État Commentaires
CSS Level 2 (Revision 1)
La définition de 'border-collapse' dans cette spécification.
Recommendation Définition initiale.

Valeur initialeseparate
Applicabilitédes éléments table and inline-table
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 5Opera Support complet 4Safari Support complet 1.2WebView Android Support complet 2.3Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 3Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, teoli, FredB, Mgjbot, Kyodev, Fredchat
Dernière mise à jour par : SphinxKnight,