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;这个方法最简单