CSS - espacement des bordures

La description

border-spacing définit la distance entre les cellules d'un tableau, en supposant que le tableau est rendu à l'aide du modèle de bordures séparées.

Valeurs possibles

  • length- Toute unité de longueur. Si deux valeurs sont déclarées, la première s'applique à l'espacement le long de l'axe horizontal et la seconde s'applique à l'axe vertical.

S'applique à

Éléments avec un affichage de table ou de table en ligne.

Syntaxe DOM

object.style.borderSpacing = "2px";

Exemple

Voici l'exemple pour montrer l'utilisation de l'espacement des bordures -

NOTE - Cette propriété ne fonctionne pas dans IE 6 ou NS 7.

<html>
   <head>
      <style type = "text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

Cela produira le résultat suivant -