Style borderSpacing 属性

Style 对象

设置表格中单元格之间的距离：

<table id="myTable" border="1">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>$150</td>
  </tr>
</table>
<br>
<button type="button" onclick="myFunction()">改变边框间距</button>
<script>
  function myFunction() {
    document.getElementById("myTable").style.borderSpacing = "20px";
  }
</script>

尝试一下 »

---

定义和用法

borderSpacing 属性设置或返回表格中单元格之间的距离。

注意：如果 borderCollapse 设置为 collapse，则该属性不起作用。

---

浏览器支持

所有主流浏览器都支持 borderSpacing 属性。

注意：IE7 及其之前的版本不支持 borderSpacing 属性。IE8 要求一个 !DOCTYPE。IE9 支持该属性。

---

语法

返回 borderSpacing 属性：

object.style.borderSpacing

设置 borderSpacing 属性：

object.style.borderSpacing = "length length|initial|inherit"

Property Values

值	描述
length length	以长度单位形式规定单元格之间的距离。不允许使用负值。默认值是 0。 如果指定了一个长度值，那么规定的是水平和垂直间距。 如果指定了两个长度值，那么第一个设置水平间距，第二个设置垂直间距。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

技术细节

默认值：	0
返回值：	字符串，表示表格中单元格之间的距离。
CSS 版本	CSS2

---

更多实例

返回表格中单元格之间的距离：

<table id="myTable" border="1" style="border-spacing:10px;">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>$150</td>
  </tr>
</table>
<br>
<button type="button" onclick="myFunction()">返回表格中单元格之间的距离</button>
<script>
  function myFunction() {
    alert(document.getElementById("myTable").style.borderSpacing);
  }
</script>

尝试一下 »

---

相关文章

CSS 教程：CSS Table（表格）

CSS 参考手册：border-spacing 属性

---

Style 对象