CSS - spaziatura del bordo

Descrizione

border-spacing imposta la distanza tra le celle in una tabella, assumendo che il rendering della tabella venga eseguito utilizzando il modello a bordi separati.

Possibili valori

  • length- Qualsiasi unità di lunghezza. Se vengono dichiarati due valori, il primo si applica alla spaziatura lungo l'asse orizzontale e il secondo si applica all'asse verticale.

Si applica a

Elementi con visualizzazione di tabella o tabella in linea.

Sintassi DOM

object.style.borderSpacing = "2px";

Esempio

Ecco l'esempio per mostrare l'uso della spaziatura dei bordi:

NOTE - Questa proprietà non funziona in IE 6 o 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>

Questo produrrà il seguente risultato: