CSS控制table 滑动及调整列宽等问题总结
⼀. 通过css控制table y⽅向上滚动
html中没有滚动条，可以根据overflow属性的scroll来对table显⽰不完全的内容进⾏滚动.
只是y⽅向上滚动，很简单，只要设置div的height⾼度。然后设置overflow-y:scroll。这样当内容⾼度超过了height设定的⾼度，就会出现滚动条
css:
.scroll_y{
max-height: 200px;
/* 宽度⼤概⽐表头宽17px，具体值实际调试 */
width:531px;
overflow-y: scroll;
}
代码：
***
x⽅向上滚动。则必须设定表格宽度，当超过设定宽度后就显⽰滚动条。
1.对于表头的table  div 的overflow属性设置为hidden，height属性控制显⽰宽度
.top-div{
width:500px;
overflow:hidden;
}
2. 下⾯显⽰部分的table div的overflow属性设置为scroll，height属性控制显⽰宽度(⽐表头的宽度宽⼀个滚动条的宽度)
.right-div{
width:517px;
overflow:scroll;
max-height:200px;
}
3.javascript 中onscroll事件或jquery中scroll事件来控制当下⾯显⽰部分表格滚动条沿x⽅向滚动时，表头table也沿x⽅向滚动
<script type="text/javascript">
var $ElementById("top-div");
var $ElementById("right-div");
function scroll(){
$top.scrollLeft = $right.scrollLeft
}
$right.οnscrοll=scroll;
</script>
具体代码如下：
css表格样式***效果图
三. 表格宽度
上⾯两段代码是在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提前确定好列宽。
<colgroup>
<col class="techDepartment"></col>
<col class="marketDepartment"></col>
<col class="financeDeparment"></col>
<col class="name"></col>
<col class="age"></col>
<col class="from"></col>
<col class="level"></col>
</colgroup>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。