Table表格标题固定,内容滚动

发布时间:2020年11月11日      浏览次数:109 次
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table表格标题固定,内容滚动</title>
</head>
<style>
#fixedDiv { width: 100%; background-color: #999; color: #000; overflow: hidden; }
#mainDiv { width: 100%; height: 500px; background-color: #fff; overflow: auto;}
#fixedDiv table, #mainDiv table { width: 1580px; }
#mainDiv tr:nth-child(even) { background-color: #f9f9f9;}

.col_1{ width:80px;}
.col_2{ width:300px;}
.col_3{ width:300px;}
.col_4{ width:300px;}
.col_5{ width:300px;}
.col_6{ width:300px;}
</style>
<body>
<div style="width: 800px; background-color: #999;">
      <div id="fixedDiv">
            <table>
                  <thead>
                        <tr>
                              <td class="col_1">序号</td>
                              <td class="col_2">标题1</td>
                              <td class="col_3">标题2</td>
                              <td class="col_4">标题3</td>
                              <td class="col_5">标题4</td>
                              <td class="col_6">标题5</td>
                        </tr>
                  </thead>
            </table>
      </div>
      <div id="mainDiv">
            <table>
                  <tbody>
                        <? for ( $i=1; $i<=50; $i++ ){ //这里我是用PHP进行循环N条内容的,自己修改 ?>
                        <tr>
                              <td class="col_1"><?=$i?></td>
                              <td class="col_2">我只是用来测试的</td>
                              <td class="col_3">我只是用来测试的</td>
                              <td class="col_4">我只是用来测试的</td>
                              <td class="col_5">我只是用来测试的</td>
                              <td class="col_6">我只是用来测试的</td>
                        </tr>
                        <? } ?>
                  </tbody>
            </table>
      </div>
</div>
<script src="jquery.min.js"></script>
<script>
      //检测是否该容器存在垂直滚动条
      if ($('#mainDiv')[0].scrollHeight > $('#mainDiv')[0].clientHeight) {
            $("#fixedDiv").css("width", $('#mainDiv')[0].clientWidth+"px");
      }
      //内容DIV滚动多少距离,标题DIV就滚动多少
      $('#mainDiv').on('scroll', function () {
            $("#fixedDiv").scrollLeft($('#mainDiv').scrollLeft());
      });
</script>
</body>
</html>
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!