单像素边框表格排版的设置问题（并不容易的问题）

什么？很容易?就让dreamweaver自动生成，设置宽高，然后给一个像素的border给td就能实现，真的很容易吗？但是我们按一般的设置会发现会出现下面这个问题：

出现的问题： 在 firefox 和 ie6,ie7 中存在表格宽高度不一致的显示（ firefox 和 ie5.5 的显示一样， ie6 和 ie7 中显示一样）

一种设置方法（提案）：

代码中的设置：
table 标签中： cellspacing="0" cellpadding="0" 这句要加上，否则单元格高度比设置的要高 2px ，即设置的高度和行高为 20px, 实际显示为 22px 。
css 中设置：定义表格中的样式：加上 border-collapse:collapse; 单元格 td,th 中： line-height:20px; 即用行高的设置代替高度设置。

计算设置好的表格宽度和高度：
单元格的高度： = 行高（不包括边框在内）；
单元格的宽度： ie 中 = 设置的宽度（不包括边框在内）， firefox= 设置的宽度（不包括边框在内） + 左 border 宽度，（即多算了一个左 border 宽度）
宽度： ie 表格宽度 = 实际设置的表格宽度， firefox 中显示的表格宽度 = 设置的表格宽度 +1* 右（或外）边框宽度 px ；
高度：这个全部都相同， = 单元格行高 * 行数 ( 多行字，一行字算一行 )+ 边框数

这样做的缺点： firefox 中显示的表格宽度 = 设置的表格宽度 +1* 右（或外）边框宽度 px ；这是由 b order-collapse:collapse这句引起的。

问题出现的原因：

Firefox 对表格的解析和 ie5.5 的模型是一致的

1， 不加 cellspacing="0" cellpadding="0" 这句会出现的问题：

firefox 中 td 的实际高度等于设置的行高 +2px 即默认时 firefox 中 cellspacing 和 cellpadding 是有数值的。

2， 以高度 height 来设置 td 高度 td{height:X px} ：

Ie6,ie7 以单元格高度（即不加上下边框）为 td 的设置高度，但 ie5.5 和 firefox 是将单元格和上下边框的高度加起来为 td 的设置高度（如果没有 border-collapse:collapse ，这个高度是算上边框和下边框的高度即： ,X= 单元格实际高 + 上边框 + 下边框，但设置 border-collapse:collapse 以后， border 的高度压缩了，则 ,X= 单元格实际高 +( 上边框 + 下边框 )/2 ）。在宽度设置上也存在这个问题。

3， 给单元格设置了宽度后，加 padding 属性 td{width:X px; paading:Apx Bpx Cpx Dpx;} ：

Ie6,ie7, 的中对宽度的解释： X= 文字宽度，而实际单元格的宽度就等于 X+B+Dpx ，但 firefox 和 ie5.5 是一样的： X= 单元格宽度

4， 给 table 加 border-collapse:collapse 出现的问题 table{width:500px; border-collapse:collapse;} ：

Ie6,ie7 表格的宽度为设置的实际宽度，但 firefox 和 ie5.5 表格的实际宽度为设置宽度 + 右边框的宽度 /2 。但有时如果我们需要 1px 的边框高度，必须要用到 border-collapse:collapse 时，这个宽度问题是否就可以将就。
另外：如果我们给表格既加了外边框又给单元格加了边框，由于加了这句，显示效果是不同的，ie会显示表格边框的颜色和宽度，但firefox不会，它会用单元格的边框属性覆盖住表格外边框的属性。

有另一种做出单边框的效果：

表格中 table 标签： cellspacing="1" cellpadding="0"

样式表中： table:{ background:red;border:0;}    td{background:green;}

则结果显示的就是红色的边框绿色背景的表格。这是否能替代 border-collapse:collapse ，做单边框表格，而解决 firefox 中宽度超出设置宽度的问题。

试验证明：解决了！不过这样不能单独设置某个单元格的边框效果，不然会出现该单元格多边框的效果：

得出另一种设置表格的方法：

代码中的设置：
table 标签中： cellspacing="1" cellpadding="0"

css 中设置 ： table:{width:500px; background:red;border:0;}    td,th{background:#fff; line-height:20px;}; 即用行高的设置代替高度设置。

具体表格算法就不再说了，

这种做法好处：

解决了第一个种做法中表格宽度的问题，表格的宽度就直接等于我们设置的宽度了，高度计算和上一种方法一致。

综上，重点：
1，用line-height的设置代替height的设置来设置单元格的高度。
2， cellspacing，cellpadding这两个属性的重要性。
3， border-collapse:collapse这句给表格设置带来的差别。
4，td的padding属性ie6,ie7和firefox对此解释的不同。

原文地址:http://hi.baidu.com/bujichong/blog/item/7a24ffde81020a5795ee3762.html