Attribut BORDER-COLLAPSE
Rôle
L’attribut border-collapse permet de fusionner les bordures des cellules de tableau
Version : CSS2
Héritage (inherit) : oui
Propriété Javascript : element.style.borderCollapse
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
table{
border-collapse : collapse;
}
table{
border-collapse : collapse;
}
table{ border-collapse : collapse; }
– Le code HTML
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<table border="1">
<caption>Titre</caption>
<tbody><tr>
<th>nom</th>
<th>prénom</th>
<th>age</th>
</tr>
<tr>
<td>Dupont</td>
<td>Jean</td>
<td>40</td>
</tr>
</tbody>
</table>
<table border="1">
<caption>Titre</caption>
<tbody><tr>
<th>nom</th>
<th>prénom</th>
<th>age</th>
</tr>
<tr>
<td>Dupont</td>
<td>Jean</td>
<td>40</td>
</tr>
</tbody>
</table>
<table border="1"> <caption>Titre</caption> <tbody><tr> <th>nom</th> <th>prénom</th> <th>age</th> </tr> <tr> <td>Dupont</td> <td>Jean</td> <td>40</td> </tr> </tbody> </table>
Résultat
Compatibilité
L’attribut border-collapse est pris en charge par tous les principaux navigateurs
Valeurs
Les différentes valeurs de l’attribut border-collapse sont:
- separate
- Les bordures des cellules sont séparées : valeur par défaut
Syntaxe :
border-collapse : separate
- collapse
- Les bordures des cellules fusionnent
Syntaxe :
border-collapse : bottom
- initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
border-collapse : initial
- inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
border-collapse : inherit