深入探讨css之table

td宽度之谜

只有一行的宽度

第二行设置不一样的宽度

结论：经常有同事困惑于此事，原因在于此，table的宽度一般以第一行为准。

table-layout

w3c之解释

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

 

w3c之印象

结论：automatic内容少的时候，还是会按照百分比来分配，一旦某一列的内容过多，那一列会膨胀直到内容完全显示。剩下的宽度会按照两者的百分比继续分配。

fixed则不关心内容，设置的百分比是多少，则会显示多少。实际场景中fixed会使用的更多。因此下面单独分析fixed。

百分比宽度与像素组合的总结分析（fixed）

提示：使用fixed必须保证table有宽度，不然设置fixed也是无效设置。

• 全部设置像素

• 全部设置百分比

• 像素与百分比组合

fixed结论：

1.设置像素来达到百分比的目的和直接设置百分比的效果还是有差异。

2.具体的像素值与百分比搭配的时候，剩余的列的百分比需要以100%平均分配才能最解决我们想要的结果。

border-collapse:

w3c的解释：

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

 

w3c之印象：

separate：

separate效果：

table嵌套table深入剖析border-collapse：

（最下面的一行为嵌套的table）

collapse:

 

分析：tr的宽度不等于table的宽度，而是table-trboder/2,因此tr下再嵌table，不能保证与上面的table宽度一致，所以无论怎么设置都是无法对齐的。

separate:

分析：tr长度与table一样长，因此tr嵌table的宽度也能保证与table的长度一致。

border-collapse的总结：在table嵌table的场景时，父table如果设置collapse属性，要么不要设置左右边框。需要左右边框的情形，那么需要把父table设置collapse才能保证上下table一致。