2018-11-15表格冻结前两列和表头

作者: 鹿啦啦zz | 来源:发表于2018-11-15 11:36 被阅读0次

2018-11-15表格冻结前两列和表头

html-表格

html02 2018-09-03

如何冻结窗格（前两行，前两列）

Excel从起步到起飞第五课：如何冻结行和列

html基本标签

element table 固定部分二级表头

表格以及流程图的制作

2017.9.4

html+css之table表格

css+js简单实现table固定首行首列 - guicaizhou的专栏 - CSDN博客
本人根据原博的代码基础上进行修改

<!DOCTYPE html>
<html>
<head>
  <title>hhh</title>
  <meta charset="utf-8"></meta>
  <style type="text/css">
  table{border-collapse:collapse;word-break: keep-all;
    }
    *{
      padding: 0;
      margin:0;
    }
    td{
        width: 100px;
        padding:0 20px;
        border:1px solid #fff;
    }
     tbody>tr:first-child,#left_div1 tbody>tr:first-child{
      /*background: #ccc;*/
      
    }

    #left_div{
        width:200px;
        float: left;
    }
    #left_div1{
        width: 100%;
        background: yellow;
        position:relative;
        z-index: 2
    }
    #left_div2{
        width: 100%;
        height: 103px;
        overflow: hidden;
            /*margin-top: -21px;
            padding-top:24px;*/
            position: relative;
            background: lightblue;
    }
    #right_div{
        width: 600px;
        float: left;

    }
    #right_div1{
        width: 100%;
        overflow: hidden;
       width: calc(100% - 20px);
    }
    #right_divx{
        /*width: 820px;*/
    }
    #right_div2{
        width:100%;
        height:120px;
        overflow: auto;
        margin-left:-200px;
        padding-left:200px;
        padding-top: 24px;
        margin-top: -24px;
    }
    #right_table1{
        /*width: 800px;*/
        padding-right: 20px;
        position: relative;
    }
    #right_table1 td{
      background: yellow;
    }
    #right_table2{
        /*width: 800px;*/
        background: pink;
    }
#out{
  position: absolute;
  left: 120px;
  top:120px;
}
  </style>

</head>
<body>
<div id="out">
  <div id="left_div">
    <div id="left_div1">
        <table id="left_table1">
        <!-- <colgroup><col style="width: 80px;" /><col /></colgroup> -->
         <!-- <colgroup width="80px"></colgroup> -->
          <tr><td>表头1</td><td>表头2</td></tr>
        </table>
    </div>
    <div id="left_div2">
        <table id="left_table2">
          <tr><td>lululu</td><td>hanhan</td></tr>
          <tr><td>lululu</td><td>hanhan</td></tr>
          <tr><td>lululu</td><td>hanhan</td></tr>
          <tr><td>lululu</td><td>hanhan</td></tr>
          <tr><td>lululu</td><td>hanhan</td></tr>
          <tr><td>lululu</td><td>hanhan</td></tr>
          <tr><td>lululu</td><td>hanhan</td></tr>
          <tr><td>lululu</td><td>hanhan</td></tr>
          <tr><td>lululu</td><td>hanhan</td></tr>
        </table>
    </div>
</div>
<div id="right_div">
    <div id="right_div1">
        <div id="right_divx">
            <table id="right_table1">
            <!-- <colgroup width="80px"></colgroup> -->
              <tr><td>表头3</td><td>hanhan</td><td>lululu</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td></tr>
             
            </table>
        </div>
    </div>
    <div id="right_div2">
        <table id="right_table2">
          <tr><td>lululu</td><td>hanhan</td><td>lululu</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td></tr>
          <tr><td>lululu</td><td>hanhan</td><td>lululu</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td></tr>
           <tr><td>lululu</td><td>hanhan</td><td>lululu</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td></tr>
            <tr><td>lululu</td><td>hanhan</td><td>lululu</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td></tr>
           <tr><td>lululu</td><td>hanhan</td><td>lululu</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td></tr> 
           <tr><td>lululu</td><td>hanhan</td><td>lululu</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td></tr>
           <tr><td>lululu</td><td>hanhan</td><td>lululu</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td></tr> 
           <tr><td>lululu</td><td>hanhan</td><td>lululu</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td><td>hanhan</td></tr>
        </table>
    </div>
</div>
</div>
</body>
<script type="text/javascript">
var scrollTop = window.pageYOffset 
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;//兼容IE处理
  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;
  }

</script>
</html>