HTML 表格 thead 不动 , tbody 出现进度条

 

以前完成这个,是在 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 设置有高度