【CSS】用css控制cellspacing、cellpadding分析

默认情况下，table单元格之间是有间隔的。一般情况下，我们会利用table的cellpadding和cellpadding来清除默认样式，如下：

<table cellspacing="0" cellpadding="0"></table>

但这样做不仅增加了代码的体积，而且也极其不符合样式与内容分离的web标准，因此使用css控制cellspacing/cellpadding便有其意义。

先说结论，采用以下两行样式即可：

table{border-collapse:collapse;}
th,td{padding:0;}

th, td{padding:0;}效果等同于cellpadding="0"。

table {border-collapse:collapse;}效果类似cellspacing="0"。为何是类似呢？因为前者是连同边框border一同去掉了，可参见下面的例子。与cellspacing="0"等同的应该是table{border-spacing:0;}，但是IE6不支持，所以还是用border-collapse。

做了一个测试页面，直观看效果可能更容易理解：

[runcode height="280"]




表格边框间隔

td { background-color:#9900CC; border:1px #000 solid;}
table { border:1px #f00 solid; margin:5px;}
.A { border-collapse:collapse; }
.B { border-spacing:0; }
.C tr td { padding:0px; }

aaaaaaaaaaa	b
c	d

默认无样式

aaaaaaaaaaa	b
c	d

采用cellpadding="0" cellspacing="0"

aaaaaaaaaaa	b
c	d

样式A

aaaaaaaaaaa	b
c	d

样式B

aaaaaaaaaaa	b
c	d

样式C

aaaaaaaaaaa	b
c	d

样式A、B

aaaaaaaaaaa	b
c	d

样式A、C

aaaaaaaaaaa	b
c	d

样式B、C

除IE6不支持样式B外其他样式在主流浏览器中皆有效。

芸路拾光

[/runcode]

以下是border-collapse属性和border-spacing属性介绍，至于padding属性同其他的盒状模型。

border-collapse属性

用法：设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。

默认值：	separate
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.borderCollapse="collapse"

浏览器支持：所有主流浏览器都支持 border-collapse 属性。说明：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

border-spacing 属性

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

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

浏览器支持：所有主流浏览器除了IE6都支持 border-spacing 属性。

值	描述
length length	规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
inherit	规定应该从父元素继承 border-spacing 属性的值。

更多关于CSS样式属性的解释提供 [download id="16" format="1"] 供大家参考。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自 芸路拾光， 原文地址《【CSS】用css控制cellspacing、cellpadding分析》
标签： CSS
分享：