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 -