|
以前完成这个,是在 css上下的功夫,做出来的效果就是 tbody的进度条 占了一定宽,导致thead 和tbody 对不齐
现在发现用js 控制效果还挺好的:;
//判断容器是否存在,并添加
if (!this.parent().is(".table-wrap")) {
this.wrap('<div class="table-wrap"></div>');
}
var wrap = this.parent()
wrap.scroll(function () {//给table外面的div滚动事件绑定一个函数
var top = wrap.scrollTop(); //获取滚动的距离
var tr = wrap.find('tr').first(); //获取表格的tr
tr.children().each(function (i) {//对每一个td（每一单元格）进行处理
//获得每一行下面的所有的td，设置position为相对定位
//如果有必要也可以设置一个z-index属性
$(this).css({ "position": "relative", "top": top - 1 });
});
});
这里的 .tabe-wrap 就是给table 添加一个 容器 ,并且滚动条也是这个容器上的,也就是 .tabe-wrap 设置有高度 | 
转播
