Accueil    CSS    Propriété Border-collapse
 



style css border-collapse  Style CSS border-collapse

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété border-collapse est employée pour définir le comportement à appliquer sur les bordures d'un tableau (balise html <table>). Positionnée à "collapse" elle provoque la fusion des bordures adjacentes du tableau, ce qui offre un rendu des bordures plus fin. Positionnée à separate elle indique que les bordures seront séparées, l'espace entre celles-ci pouvant être contrôlé avec le style border-spacing.




Propriétés pour le style border-collapse :




Propriété Définition Valeurs CSS
border-collapse Spécifique à l'affichage des tableaux : permet de fusionner ou séparer les bordures des cellules collapse
inherit
separate
CSS 2


Exemple d'utilisation du style css border-collapse :





Exemple avec la propriété bordure-collapse positionnée à "separate" :

<table cellpadding="0" cellspacing="0" style="border:solid 1px green; border-collapse:separate; border-spacing:5px;">
   <tr><td>cellule 1</td><td>cellule 2</td><td>cellule 3</td></tr>
   <tr><td>cellule 4</td><td>cellule 5</td><td>cellule 6</td></tr>
</table>

Exemple avec la propriété bordure-collapse positionnée à "collapse" :

<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
   <tr><td>cellule 1</td><td>cellule 2</td><td>cellule 3</td></tr>
   <tr><td>cellule 4</td><td>cellule 5</td><td>cellule 6</td></tr>
</table>




Exemple avec la propriété border-collapse positionnée à "separate" et border-spacing à 5px :

cellule 1cellule 2cellule 3
cellule 4cellule 5cellule 6


Exemple avec la propriété bordure-collapse positionnée à "collapse" :

cellule 1cellule 2cellule 3
cellule 4cellule 5cellule 6