CSS - border-spacing Property
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
To Continue Learning Please Login
Login with Google