固定table第一列

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

       <div id="freezing" style="overflow:scroll" onscroll="javascript:freezing()">
            <table id="timetable">
                <thead>
                <tr id="tablehead">
                    <th></th>
                </tr>
                </thead>
                <tbody id="tablebody">

                </tbody>
            </table>
        </div>

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<thWidth){
        $("tr>:first-child").addClass("isScrolling").css("opacity",0.2*tol);
    }else{
        $("tr>:first-child").addClass("isScrolling").css("opacity",1);
    }
}