利用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 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 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
一个MYSQL操作类
2006/11/16 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
简单的js分页脚本
2009/05/21 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python虚拟环境迁移方法
2019/01/03 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python自带的IDE在哪里
2020/07/01 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
反腐倡廉标语
2014/06/24 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python