border-collapse
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.
Exemple interactif
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
Définition formelle
Valeur initiale | separate |
---|---|
Applicabilité | des éléments table and inline-table |
Héritée | oui |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Syntaxe formelle
border-collapse =
separate |
collapse
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
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-border-collapse |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
border-spacing
border-style
- L'élément HTML
<table>
impactéborder-collapse
.