利用js+css+html实现固定table的列头不动


Posted in Javascript onDecember 08, 2016

话不多说,跟这小编来一起看下吧

1、CSS

<style type="text/css">
  #scroll_head {
    position: absolute;
    display: none;
  }
</style>

2、Javascript

<script type="text/javascript">
  //该函数在上面一个table数据加载完成后调用
  //把表头的宽度设置到会滚动的页头去
  var copyWidth = function () {
    var b = $('#data_tbody').prev().find('tr:last').find('th');
    var c = $('#scroll_head').find('tr:last').find('th');
    for (var i = 0; i < b.length; i++) {
      var newWith = b.eq(i).width();
      if ($.browser.msie) {
        newWith += 1;
      }
      c.eq(i).width(newWith);
    }
  }
  $(function () {
    $(window).scroll(function () {
      if ($('#data_tbody').length > 0) {
        var thead = $('#data_tbody').prev();
        var thOffset = thead.offset();
        var scTop = $(window).scrollTop(); //滚动条相对top的位置
        if (scTop > thOffset.top) {  //滚动条滚到thead及以下的位置,用临时的thead代替显示
          $('#scroll_head').css('display', 'block');
          $('#scroll_head').offset({ top: scTop, left: thOffset.left });
        }
        else { //滚动条滚到thead上的位置,用table的原始thead显示
          $('#scroll_head').css('display', 'none');
        }
      }
    });
  });
</script>

3、Html内容

<div id="data_div">
  <table>
    @*thead内容及样式同scroll_head中的thead*@
    @*thead使用深背景色,避免滚动时和tbody内容重叠显示*@
    <thead> 
      <tr>
        @*一级标题*@
        <th class="tt1" colspan="2">一级1</th>
        <th class="tt2" colspan="5">一级2</th>
        <th class="tt3" colspan="6">一级3</th>
      </tr>
      <tr>
        @*二级标题*@
        <th style="width: 23px;">二级11</th>
        <th style="width: 36px;">二级12</th>
        <th class="tt" style="width: 40px;">二级21</th>
        <th class="tt" style="width: 30px;">二级22</th>
        <th class="tt" style="width: 30px;">二级23</th>
        <th class="tt" style="width: 30px;">二级23</th>
        <th class="tt" style="width: 30px;">二级24</th>
        <th class="tt" style="width: 30px;">二级25</th>
        <th class="tt" style="width: 30px;">二级31</th>
        <th class="tt" style="width: 30px;">二级32</th>
        <th class="tt" style="width: 30px;">二级33</th>
        <th class="tt" style="width: 30px;">二级33</th>
        <th class="tt" style="width: 30px;">二级34</th>
        <th class="tt" style="width: 30px;">二级35</th>
        <th class="tt" style="width: 30px;">二级36</th>
      </tr>
    </thead>
    <tbody id="data_tbody">
      数据内容,在数据加载完成后调用copyWidth()函数解决兼容性
    </tbody>
  </table>
</div>
<div id="scroll_head" style="display:block; top: 168px; left: 0px; position: relative;">
  <table width="100%">
    <thead> @*thead使用深背景色,避免滚动时和tbody内容重叠显示*@
      <tr>
        @*一级标题*@
        <th class="tt1" colspan="2">一级1</th>
        <th class="tt2" colspan="5">一级2</th>
        <th class="tt3" colspan="6">一级3</th>
      </tr>
      <tr>
        @*二级标题*@
        <th style="width: 23px;">二级11</th>
        <th style="width: 36px;">二级12</th>
        <th class="tt" style="width: 40px;">二级21</th>
        <th class="tt" style="width: 30px;">二级22</th>
        <th class="tt" style="width: 30px;">二级23</th>
        <th class="tt" style="width: 30px;">二级23</th>
        <th class="tt" style="width: 30px;">二级24</th>
        <th class="tt" style="width: 30px;">二级25</th>
        <th class="tt" style="width: 30px;">二级31</th>
        <th class="tt" style="width: 30px;">二级32</th>
        <th class="tt" style="width: 30px;">二级33</th>
        <th class="tt" style="width: 30px;">二级33</th>
        <th class="tt" style="width: 30px;">二级34</th>
        <th class="tt" style="width: 30px;">二级35</th>
        <th class="tt" style="width: 30px;">二级36</th>
      </tr>
    </thead>
  </table>
</div>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
javascript操作excel生成报表示例
May 08 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
javascript cookie的简单应用
Feb 24 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
JS中如何优雅的使用async await详解
Oct 05 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 #Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 #Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 #Javascript
js倒计时小实例(多次定时)
Dec 08 #Javascript
详解JavaScript中的属性和特性
Dec 08 #Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 #Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 #Javascript
You might like
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
Vue.js数据绑定之data属性
2017/07/07 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Python3多线程操作简单示例
2018/05/22 Python
Python龙贝格法求积分实例
2020/02/29 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
青年文明号事迹材料
2014/01/18 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
拔河比赛口号
2014/06/10 职场文书
品德与社会教学反思
2016/02/24 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
创业计划书之养殖业
2019/10/11 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
JavaScript函数柯里化
2021/11/07 Javascript