The border-spacing property specifies the spacing between the borders of adjacent cells.
You can use this property when the "separate" value is set to the border-collapse property.
This property can apply to the TABLE element.
table {
border: 2px #000000 solid;
border-spacing: 10px;
}
| Property | Value | Explanation |
|---|---|---|
| border-spacing | length | the distance of spacing |
border-spacing: 5px; : [all sides] spacing
border-spacing: 5px 10px; : [left, right] [top, bottom] spacing
<html> <head> <title>TAG index</title> <style type="text/css"> table { border: 2px #2b2b2b solid; border-collapse: separate; width: 500px; margin-bottom: 20px; } td, th { border: 2px #2b2b2b solid; } #example1 { border-spacing: 5px; } #example2 { border-spacing: 30px 5px; } </style> </head> <body> <table> <tr> <th colspan="2">The default spacing</th> </tr> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> <table id="example1"> <tr> <th colspan="2">[The spacing on all sides:5px]</th> </tr> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> <table id="example2"> <tr> <th colspan="2">[left,right:30px] [top,bottom:5px]</th> </tr> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> </body> </html>
| The default spacing | |
|---|---|
| Cell A | Cell B |
| [The spacing on all sides:5px] | |
|---|---|
| Cell A | Cell B |
| [left,right:30px] [top,bottom:5px] | |
|---|---|
| Cell A | Cell B |