CSS - espaçamento de borda

Descrição

border-spacing define a distância entre as células em uma tabela, assumindo que a tabela é renderizada usando o modelo de bordas separadas.

Valores possíveis

length- Qualquer unidade de comprimento. Se dois valores forem declarados, o primeiro se aplica ao espaçamento ao longo do eixo horizontal e o segundo se aplica ao eixo vertical.

Aplica-se a

Elementos com exibição de mesa ou mesa embutida.

Sintaxe DOM

object.style.borderSpacing = "2px";

Exemplo

Aqui está o exemplo para mostrar o uso de espaçamento de borda -

NOTE - Esta propriedade não funciona no 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>

Isso produzirá o seguinte resultado -

↰ Previous page