CSS - border-collapse
La description
border-collapse détermine le modèle de bordure utilisé dans le rendu d'un tableau.
Valeurs possibles
collapse- Les bordures sont réduites pour former une seule bordure. Deux cellules adjacentes partageront une bordure.
separate- Les frontières sont séparées. Chaque cellule a sa propre bordure et aucune de ces bordures n'est partagée avec les autres cellules du tableau.
S'applique à
Éléments avec un affichage de table ou de table en ligne.
Syntaxe DOM
object.style.borderCollapse = "Any of the two values";
Exemple
Voici l'exemple pour afficher les deux valeurs -
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
Cela produira le résultat suivant -