利用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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Element Carousel 走马灯的具体实现
Jul 26 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php生成excel列序号代码实例
2013/12/24 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
iview实现图片上传功能
2020/06/29 Javascript
详解vue v-model
2020/08/31 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
python和bash统计CPU利用率的方法
2015/07/10 Python
Django 多环境配置详解
2019/05/14 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Python运行异常管理解决方案
2020/03/09 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
PyTorch安装与基本使用详解
2020/08/31 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
大学生暑期社会实践证明范本
2014/10/24 职场文书
英语教师个人工作总结
2015/02/09 职场文书
大学生英文求职信范文
2015/03/19 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS