在CSS中可以使用border-spacing屬性來設(shè)置表格邊框間的距離；border-spacing屬性用于設(shè)置表中相鄰單元格邊框之間的距離。此屬性僅當(dāng)border-collapse屬性設(shè)置為separate或在HTML標(biāo)簽中設(shè)置cellspacing屬性時才有效。
border-spacing屬性會在表格邊框“分離”時，設(shè)置行和單元格的邊框在橫向和縱向上的間距。
語法：
border-spacing:length[-length];
屬性值：它可以有1~2個length值
● 如果提供全部兩個length值時，第一個作用于橫向間距，第二個作用于縱向間距。
● 如果只提供一個length值時，這個值將作用于橫向和縱向上的間距。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-spacing屬性</title>
<style>
? ? ? ? ? ? table, th, td {
? ? ? ? ? ? border: 2px solid #3E8F3E;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? ? ? #demo {
? ? ? ? ? ? border-collapse: separate;
? ? ? ? ? ? background-color: none;
? ? ? ? ? ? border-spacing: 20px 40px;
? ? ? ? }
? ? ? ? h2 {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? <center>
? ? ? ? <h2>border-spacing屬性</h2>
? ? ? ? <h3>border-spacing: 20px 40px;</h3>
? ? ? ? <table style="width:70%" id="demo">
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? ? ? <th>年齡</th>
? ? ? ? ? ? ? ? <th>性別</th>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>曉華</td>
? ? ? ? ? ? ? ? <td>15</td>
? ? ? ? ? ? ? ? <td>女</td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>天健</td>
? ? ? ? ? ? ? ? <td>27</td>
? ? ? ? ? ? ? ? <td>男</td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>鄧琴</td>
? ? ? ? ? ? ? ? <td>28</td>
? ? ? ? ? ? ? ? <td>女</td>
? ? ? ? ? ? </tr>
? ? ? ? </table>
? ? </center>
</body>
</html>
效果圖：
瀏覽器支持
CSS border spacing屬性支持的瀏覽器如下：
● 谷歌Chrome 1.0
● Internet Explorer 8.0
● Firefox 1.0
● Opera 4.0
● Safari 1.0
推薦閱讀：
