CSS border-spacing 属性

border-spacing 属性指定相邻单元格边框之间的距离(只适用于 边框分离模式 )。相当于 HTML 中的 cellspacing 属性,但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

border-spacing 值也适用于表格的外层边框上,即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的(水平的或垂直的) 边框间距(border-spacing)和相应的(上,右,下或左)内边距之和。


实例

为表格设置 border-spacing:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. table.one
  6. {
  7. border-collapse: separate;
  8. border-spacing: 10px
  9. }
  10. table.two
  11. {
  12. border-collapse: separate;
  13. border-spacing: 10px 50px
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <table class="one" border="1">
  19. <tr>
  20. <td>Adams</td>
  21. <td>John</td>
  22. </tr>
  23. <tr>
  24. <td>Bush</td>
  25. <td>George</td>
  26. </tr>
  27. </table>
  28. <br>
  29. <table class="two" border="1">
  30. <tr>
  31. <td>Carter</td>
  32. <td>Thomas</td>
  33. </tr>
  34. <tr>
  35. <td>Gates</td>
  36. <td>Bill</td>
  37. </tr>
  38. </table>
  39. <p><b>注释:</b>如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 border-spacing 属性。</p>
  40. </body>
  41. </html>

浏览器支持

属性
border-spacing1.08.01.01.04.0

定义和用法

border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。

注释:某些版本的IE浏览器不支持此属性。

该属性只适用于 border-collapse 值是 separate 的时候。

说明

该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。

默认值:not specified
继承性:yes
版本:CSS2
JavaScript 语法:object.style.borderSpacing="15px"

可能的值

描述
length length

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个 length 参数,那么定义的是水平和垂直间距。

如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。

inherit规定应该从父元素继承 border-spacing 属性的值。

相关页面

CSS 教程:CSS 表格

分类导航