CSS - espaciado de bordes

Descripción

border-spacing establece la distancia entre las celdas de una tabla, asumiendo que la tabla se representa utilizando el modelo de bordes separados.

Valores posibles

length- Cualquier unidad de longitud. Si se declaran dos valores, el primero se aplica al espaciado a lo largo del eje horizontal y el segundo se aplica al eje vertical.

Se aplica a

Elementos con display de mesa o inline-table.

Sintaxis DOM

object.style.borderSpacing = "2px";

Ejemplo

Aquí está el ejemplo para mostrar el uso del espaciado de bordes:

NOTE - Esta propiedad no funciona en 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>

Esto producirá el siguiente resultado:

↰ Previous page