【例子】固定表格的首行与首列

思路如下图所展示，整个表格分为四个部分：L1区域固定不动，R2为主要滑动区域，L2和R1随着R2的滑动相应滑动
解决实例：
直接复制下方的全部代码即可，没有引用本地文件
下面是该实例的完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="jack">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><!-- 适应手机屏幕，防止屏幕缩放 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<title>固定表头和首列的表格</title>
<style type="text/css">
body{background-color:#f2f2f2;font-family:"Microsoft YaHei";font-size:14px;}
li{list-style:none;}
.head{height: 36px;line-height: 36px;position: fixed;top: 0;background: #f2f2f2;padding: 0 12px;width: 100%;}
.head a{text-decoration:none;color: #757575;float: left;}
.head span{color: #757575;float: right;}

.main{display:table;}
.main .choose{background-color:#fff;padding:15px 0 0;position:fixed;width:100%;}
.main .choose h3{font-size:14px;width:90%;margin:0 auto;margin-bottom: 10px;border-left:3px solid #33AEF0;padding-left:5px;font-weight:bold;}
.main .choose ul{display:flex;padding-left:0;}
.main .choose ul li{flex:1;background-color:#5a5a5a;color:#cfcfcf;margin:10px;text-align:center;padding:10px;font-size:16px;}

.main .form{display:table;font-size:12px;}
#left_div{width:110px;float: left;background-color:#fff;}
#left_div1{width: 100%;}
#left_table1 th{background: #E9F8FF;text-align:center;width:50%;white-space:nowrap; height:34px;}
#left_div2{width: 100%;overflow:hidden;}
#left_table2 td{text-align:center;width:50%;white-space:nowrap}
#left_table2 td.diqu{vertical-align:middle;}

#right_div{float: left;background-color:#fff;}
#right_div1{width: 100%;overflow: hidden;}
#right_divx{width: 1000px;}
#right_table1{width: 980px;}
#right_table1 th{background: #E9F8FF;text-align:center;width:10%;white-space:nowrap;}
#right_div2{width:100%;overflow: auto;}
#right_table2{ width: 980px;max-width: 980px;white-space:nowrap;/**width和max-width一起写，手机浏览器打开也能固定长度**/}
#right_table2 td{width:10%;text-align:center;}
.table {margin-bottom:0;}

.footer{position:fixed;bottom:0;height:50px;width:100%;background-color: #fff;}
.footer ul{display:flex;padding-left:0;height:100%;}
.footer ul li{flex:1;text-align:center;padding-top:20px;}
.footer ul li a{color:#757575;text-decoration:none;}
.footer ul li.active a{color:#00b25d;}
</style>
<div class="head">
  <a href="javascript:history.go(-1)">返回</a>
  <span>查询</span>
</div>
<div style="height:36px;clear:both;"></div>

<div class="main">
  <div class="choose">
    <h3>物流成本 (2018-06-20 ——2018-06-20)</h3>
    <ul>
      <li>环比</li>
      <li>差异</li>
      <li>同比</li>
    </ul>
  </div>
  <div style="height:120px;clear:both;"></div>

  <div class="form">
    <div id="left_div">
      <div id="left_div1">
        <table id="left_table1" class="table table-bordered">
          <tr>
            <th>地区</th>
            <th>选项</th>
          </tr>
        </table>
      </div>
      <div id="left_div2">
        <table id="left_table2" class="table table-bordered">
        </table>
      </div>
    </div>

    <div id="right_div">
      <div id="right_div1">
        <div id="right_divx">
          <table id="right_table1" class="table table-bordered">
            <tr>
              <th>我是表头1</th>
              <th>我是表头2</th>
              <th>我是表头3</th>
              <th>我是表头4</th>
              <th>我是表头5</th>
              <th>我是表头6</th>
              <th>我是表头7</th>
              <th>我是表头8</th>
              <th>我是表头9</th>
            </tr>
          </table>
        </div>
      </div>
      <div id="right_div2">
        <table id="right_table2" class="table table-bordered">
        </table>
      </div>
    </div>
  </div>
</div>

<div class="footer">
  <ul>
    <li class="active"><a href="javascript:;">首页</a></li>
    <li><a href="javascript:;">通讯录</a></li>
    <li><a href="javascript:;">我</a></li>
  </ul>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">

$(".choose li").click(function(){
  if($(this).css("background-color")=="rgb(90, 90, 90)"){
    $(this).css("backgroundColor","rgb(235, 235, 235)");
  }else{
    $(this).css("backgroundColor","rgb(90, 90, 90)");
  }
});

$(".footer li").click(function(){
  $(this).addClass("active").siblings("li").removeClass("active");
});

var num_diqu = 1;
var num_xuanze = 1;
for(var i=1;i<25;i++){
  if(i%3=="1"){
    $("#left_table2").append("<tr><td rowspan='3' class='diqu'>地区"+num_diqu+"</td><td>成本"+num_xuanze+"</td>+</tr>");
    num_diqu++;
  }else if(i%3=="2"){
    $("#left_table2").append("<tr><td>差异"+num_xuanze+"</td>+</tr>");
  }else{
    $("#left_table2").append("<tr><td>环比"+num_xuanze+"</td>+</tr>");
    num_xuanze++;
  }
  $("#right_table2").append("<tr><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td></tr>");
}

//根据右下边实现上下左右滑动
$("#right_div2").scroll(function(){
    var right_div2_top = $(this).scrollTop();
    var right_div2_left = $(this).scrollLeft();
    $("#left_div2").scrollTop(right_div2_top);
    $("#right_div1").scrollLeft(right_div2_left);
});

//设置下边div高度以及右边div宽度
$("#left_div2").css("height",$(window).height()-245);
$("#right_div2").css("height",$(window).height()-245);
$("#right_div").css("width",$(window).width()-110);
//当浏览器大小变化时
$(window).resize(function () {          
    $("#left_div2").css("height",$(window).height()-245);
    $("#right_div2").css("height",$(window).height()-245);
    $("#right_div").css("width",$(window).width()-120); 
});


</script>
</body>
</html>
hamal_ye
发布了22 篇原创文章 · 获赞 1 · 访问量 1万+
私信关注
【例子】固定表格的首行与首列

猜你喜欢
