【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。
做了一个测试页面，直观看效果可能更容易理解：
提示：你可以先修改部分代码再运行。
以下是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样式属性的解释提供 CSS样式表手册 供大家参考。
近期评论