css 列宽控制,CSS 控制table 滑动及调整列宽等问题总结

本文介绍了通过css+js来控制table的x,y方向上的滚动。然后详细分析了使用table时，可能出现的width宽度与预期设定不一致的情况，最后给出了解决方案

效果图

三. 表格宽度

上面两段代码是在table的设置上是有差异的：第二个例子的css 样式table.item将table-layout:fixed去除掉了。因为如果不去除掉。显示效果是下面这样的

上面表头的table宽度设置无效了。可以看到前面合并表头【技术部】【市场部】【财务部】的宽度一致了。width属性不生效了。

1. 分析下table-layout:

默认属性是auto。设置列宽后。当表列中的所有内容长度都不超过设置的列宽。那么列宽就是设定的width值。否则列宽是此列中内容最长的宽度。也就是说列宽的确定是在加载完所有行内容之后确定。

fixed-out：设定为fixed-out后。列宽就由设定此列的width值，，表格宽度来决定。表格显示与表格的内容无关。所以浏览器能够在接收到第一行就显示数据。

补充实际列宽值计算:

加入由三列 width分别设为 100px,200px.300px.而将table的宽度设为1200px.

那么实际table的各列宽度应该是 100/(100+200+300)*1200=200px ,400px,600px.

基于以上分析。当去掉table-layout：fixed属性。表格正常显示，加上则异常。说明出现上述问题的根本是列的宽度。

2.分析下colspan

上面的表头table和下面的内容table css样式相同。为什么上面的table会出现那样的问题。而下面的table显示正常呢。

通过将上面的table 替换成常规table，即没有列合并。发现不存在上述问题。那么说明问题的关键就是colspan了

在1种已经分析了对于fixed-out.列宽是如何确定的。所有列宽都是由第一行确定的。所以部门下面的【技术部】【市场部】【财务部】的宽度是一样(这行是第二行了)

到此，问题分析结束。

3.解决方案

基于以上分析。解决方案有两个

1)去掉table-layout:fixed-out属性

2)使用colgroup提前确定好列宽。