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;
}
代码:

	
		table
部门 姓名 年龄
技术部 市场部 财务部
***技术部 ***市场部 ***财务部 张三 14
***技术部 ***市场部 ***财务部 张三 14
***技术部 ***市场部 ***财务部 张三 14
***技术部 ***市场部 ***财务部 张三 14
***技术部 ***市场部 ***财务部 张三 14
***技术部 ***市场部 ***财务部 张三 14
***技术部 ***市场部 ***财务部 张三 14

二.通过css控制table x,y方向上滚动

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 $top=document.getElementById("top-div");
var $right=document.getElementById("right-div");
function scroll(){
$top.scrollLeft = $right.scrollLeft
}
$right.οnscrοll=scroll;
</script>
具体代码如下:

	
		table
部门 姓名 年龄 籍贯 等级
技术部 市场部 财务部
***技术部 ***市场部 ***财务部 张三 14 南京
***技术部 ***市场部 ***财务部 张三 14 南京
***技术部 ***市场部 ***财务部 张三 14 南京
***技术部 ***市场部 ***财务部 张三 14 南京
***技术部 ***市场部 ***财务部 张三 14 南京
***技术部 ***市场部 ***财务部 张三 14 南京
***技术部 ***市场部 ***财务部 张三 14 南京
<script type="text/javascript"> var $top=document.getElementById("top-div"); var $right=document.getElementById("right-div"); function scroll(){ $top.scrollLeft = $right.scrollLeft } $right.οnscrοll=scroll; </script>

效果图

三. 表格宽度

上面两段代码是在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>







©️2020 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值