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