CSS - border-spacing



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 −

<html>
<head>
<style>
   table.one {
      border-collapse:separate;
      width:400px;
      border-spacing:10px;
   }
   table.two {
      border-collapse:separate;
      width:400px;
      border-spacing:10px 50px;
   }
</style>
</head>
<body>
   <h2>border-spacing</h2>
   <div>
         <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>
   </div>
   <div style="padding-top: 10px;">
      <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>
   </div>   
</body>
</html> 
Advertisements