CSS - border-spacing


Advertisements


Description

border-spacing sets the distance between cells in a table, assuming that the table is rendered using the separate-borders model.

Possible Values

  • length − Any length unit. If two values are declared, the first applies to spacing along the horizontal axis, and the second applies to the vertical axis.

Applies to

Elements with a display of table or inline-table.

DOM Syntax

object.style.borderSpacing = "2px";

Example

Here is the example to show usage of border-spacing:

NOTE − This property does not work in IE 6 or 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> 

This will produce following result −



Advertisements