固定table第一列

表格:为外层div绑定scroll事件

       

css:设置tr的第一个子元素为相对定位

tr>:first-child{
    width : 66px;
    position : relative;
    border : solid #A4D3EE 1px;
}
js:

//固定表格首列
function freezing(){
    $("tr>:first-child").css("left",$("#freezing").scrollLeft()-1);
    var thWidth=$("#tablehead>:first").width();
    var step=thWidth/5;//分5次过渡,每step像素过渡一次
    var scroLeft=$("#freezing").scrollLeft(); //向左滚动的距离
    var tol=Math.ceil(scroLeft/step);
    if(scroLeft==0){
        $("tr>:first-child").removeClass("isScrolling").css("opacity",1);
    }else if(scroLeft>0&&scroLeft:first-child").addClass("isScrolling").css("opacity",0.2*tol);
    }else{
        $("tr>:first-child").addClass("isScrolling").css("opacity",1);
    }
}


你可能感兴趣的:(固定table第一列)