js实现表格首行首列固定滑动

js+css实现table首行首列的冻结效果。

这个方案是把表格分为4块，首行首列不可滑动，利用onscroll 动态根据内容设置冻结首行首列内容。

html

    

        

          

            

              
左上
              
左上
            
          
        
    
    

        

          

            

              
首列
              
首列
            
          
        
    


    

        

            

              

            

              
首行标题
              
首行标题
              
首行标题
            
          
            
        
    
    

        

          

            

              
内容
              
内容
              
内容
            
          
        
    

js

var right_div2 = document.getElementById("right_div2");
  right_div2.onscroll = function(){
    var right_div2_top = this.scrollTop;
    var right_div2_left = this.scrollLeft;
    document.getElementById("left_div2").scrollTop = right_div2_top;
    document.getElementById("right_div1").scrollLeft = right_div2_left;
}

css

td{
    width: 100px;
}
#left_div{
    width:200px;
    float: left;
}
#left_div1{
    width: 100%;
}
#left_div2{
    width: 100%;
    height: 100px;
    overflow: hidden;
}
#right_div{
    width: 600px;
    float: left;
}
#right_div1{
    width: 100%;
    overflow: hidden;
}
#right_divx{
    width: 820px;
}
#right_div2{
    width:100%;
    height:120px;
    overflow: auto;
}
#right_table1{
    width: 800px;
}
#right_table2{
    width: 800px;
}