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 設置有高度