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

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

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

html

<div id="left_div">
    <div id="left_div1">
        <table id="left_table1">
          <tbody>
            <tr>
              <th>左上</th>
              <th>左上</th>
            </tr>
          </tbody>
        </table>
    </div>
    <div id="left_div2">
        <table id="left_table2">
          <tbody>
            <tr>
              <th>首列</th>
              <th>首列</th>
            </tr>
          </tbody>
        </table>
    </div>
</div>
<div id="right_div">
    <div id="right_div1">
        <div id="right_divx">
            <table id="right_table1">
              <tbody>
            <tr>
              <th>首行标题</th>
              <th>首行标题</th>
              <th>首行标题</th>
            </tr>
          </tbody>
            </table>
        </div>
    </div>
    <div id="right_div2">
        <table id="right_table2">
          <tbody>
            <tr>
              <th>内容</th>
              <th>内容</th>
              <th>内容</th>
            </tr>
          </tbody>
        </table>
    </div>
</div>

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;
}