表格前两列固定 使用td相对定位 边框消失

Question

表格需要前两列固定 给td做了相对定位“position":"relative","top":"0px","left":left,"background-color":"rgb(239, 239, 239)"
但是当左右滚动时 前两列的边框会不见，网上看了 网友提供的方法说是给td加 background-clip: border-box;貌似没有什么用，求各位大佬解救。

function createGrid(data) {
    $("#gridContainer").empty();
    $(".gridItem").css("windth",window.innerWidth);
    var tabWidth = data[0].data.length * 76 + 120;
    var time = [];
    var name = $("#measureType").find(".btnClick").eq(0).text();
    var yAxisName = name + unitMap[name];
    time.push("柜面名称","回路名称");
    time = time.concat(data[0].xAxis);

    var $table = $("<table id='dataTable' style='border-collapse:collapse;width:"+tabWidth+"px'></table>");
    var $tbody = $("<tbody></tbody>")
    var $timeTr = $("<tr style='background-color: rgb(239, 239, 239);'></tr>");  
    for(var i = 0;i < time.length;i ++){  
        var tdWidth = 120;
        if(i <= 1) {
            tdWidth = 120;
        } else {
            tdWidth = 76;
        }
        var $td = $("<td style='width:"+tdWidth+"px'>" + time[i] + "</td>")
        $timeTr.append($td);
        $tbody.append($timeTr);
    }

    for( var len=0; len<data.length;len++){   
        var value=[];
        //var arr=data[len].title.split(",");
        value.push(data[len].title[0],data[len].title[1]);   
        value = value.concat(data[len].data);
        var $valueTr = $("<tr></tr>"); 
    for(var i = 0;i < time.length;i++){              
        var tdWidth = 120;
        if(i <= 1) {
            tdWidth = 120;
        } else {
            tdWidth = 76;
        }
        if(i==1){
           var $td = $("<td style='width:"+tdWidth+"px; width:120px; color:blue;cursor:pointer'  onclick='openDetailView("+'"'+data[len].kgId+'"'+","+'"'+data[len].pgId+'"'+","+'"'+data[len].stationId+'"'+")'>" + value[i] + "</td>")
        }
        else
            var $td = $("<td style='width:"+tdWidth+"px'>" + value[i] + "</td>")
        $valueTr.append($td);
        $tbody.append($valueTr);
      }   
    }
    $table.append($tbody);
    $("#gridContainer").append($table);   
}
$("#gridContainer").scroll(function(){//给table外面的div滚动事件绑定一个函数
var left=$("#gridContainer").scrollLeft();//获取滚动的距离
var trs=$("#gridContainer table tr");//获取表格的所有tr
   trs.each(function(i){//对每一个tr（每一行）进行处理
//获得每一行下面的所有的td，然后选中下标为0的，即第一列，设置position为相对定位
//相对于父div左边的距离为滑动的距离，然后设置个背景颜色，覆盖住后面几列数据滑动到第一列下面的情况
//如果有必要也可以设置一个z-index属性
       if(i==0){
          $(this).children().eq(0).css({"position":"relative","top":"0px","left":left,"background-color":"rgb(239, 239, 239)"});
          $(this).children().eq(1).css({"position":"relative","top":"0px","left":left,"background-color":"rgb(239, 239, 239)"});
       }
       else
           {
           $(this).children().eq(0).css({"position":"relative","top":"0px","left":left,"background-color":"white"});
           $(this).children().eq(1).css({"position":"relative","top":"0px","left":left,"background-color":"white"});
           }
    });
});

Answer 1

https://blog.csdn.net/aboboo5200/article/details/78840427