jquery實現的表格凍結列(固定列)功能

<style>
.dataTables_scrollBody #tableId {
border-collapse: separate !important;
}
</style>

<div style="overflow-x:auto;width: 100%;" class="dataTables_scrollBody">
<table id="tableId" style="width: 350%;" border="0" cellspacing="0" cellpadding="0">
</table>
</div>


<script>
/*凍結表格前幾列*/
$(".dataTables_scrollBody").scroll(function(){//給table外面的div滾動事件綁定一個函數
var left=$(".dataTables_scrollBody").scrollLeft();//獲取滾動的距離
let w1 = $(".dataTables_scrollBody").width();
let w2 = $("#tableId").width();
w2 = w2-w1+2;
if(left >w2){
left = w2;
}
var theadtrs=$(".dataTables_scrollBody #tableId thead tr");//獲取表格的thead 的tr
var tbodytrs=$(".dataTables_scrollBody #tableId tbody tr");//獲取表格的body 的tr
//對每一個tr（每一行）進行處理
//獲得每一行下面的所有的td，然后選中下標為0的，即第一列，設置position為相對定位
//相對於父div左邊的距離為滑動的距離，然后設置個背景顏色，覆蓋住后面幾列數據滑動到第一列下面的情況
//如果有必要也可以設置一個z-index屬性
var num = 5;
theadtrs.each(function(i){
for (var j = 0; j < num; j++) {
$(this).children().eq(j).css({"position":"relative","top":"0px","left":left,"z-index":2});
}
});

var num1 = 5;
tbodytrs.each(function(ii){
for (var jj = 0; jj < num1; jj++) {
$(this).children().eq(jj).css({"position":"relative","top":"0px","left":left,"z-index":2,"background":"#fff"});
}
});
});
</script>

　　

td設置position:relative之后邊線消失的問題
給td設置了position:relative屬性之后，如果td還同時存在背景色，在火狐下面就會有邊線消失的情況。解決這個bug有兩個方法，一個是設置table的屬性為border-collapse: separate;td設置單邊線樣式(親測有效)。另一個方法是設置background-clip: padding-box;這個方法最簡單