转自:http://blog.csdn.net/qq807081817/article/details/46683239

有时候当碰到要显示很多行又很多列的表格的时候,往往在翻到后面的时候已经对不上某一列是什么了。
所以需要将表头固定在顶部,而且是在滚动到表头被遮住的时候,才固定到顶部。

先看效果图

再讲一下我的实现思路

通过一个额外的table来显示固定顶端的表头,当滚动条滚动到某一位置(原数据表头被遮盖)的时候,显示这个固定的表头,反之则隐藏。

首先是显示数据的表格

<table id="tMain"><thead><tr><th>Test</th><th>Test</th><th>Test</th><th>Test</th><th>Test</th><th>Test</th></tr></thead><tbody>// 这里用的是asp.net写的,就是输出50行数据@{for (int i = 0; i < 50; i++){<tr><td>TestTestTestTestTest</td><td>TestTestTestTest</td><td>TestTestTest</td><td>Test</td><td>TestTest</td><td>Test</td></tr>}}</tbody>
</table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

然后,再放一个table元素,只包含表头部分

<table id="tScroll"><thead><tr><th>Test</th><th>Test</th><th>Test</th><th>Test</th><th>Test</th><th>Test</th></tr></thead>
</table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

这个表格要设置一下样式,我们知道,要固定显示在顶部,用position:fixed;比较方便。

#tScroll{position:fixed;top:0;display:none;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

然后就是代码了。

<script>$(document).ready(function () {// 先缓存两个元素var $tmain = $("#tMain");var $tScroll = $("#tScroll");// 标题相对于document的位置信息(即document的滚动条的偏移值达到这个数值的时候,表头将被遮盖掉)var pos = $tmain.offset().top + $tmain.find(">thead").height();$(document).scroll(function () {var dataScroll = $tScroll.data("scroll");dataScroll = dataScroll || false;// 当滚动到表头被完全遮盖的位置时if ($(this).scrollTop() >= pos) {// 要判断dataScroll是否为false,只有为false的时候,才显示if (!dataScroll) {$tScroll.data("scroll", true).show().find("th").each(function () {// 实时获取原数据表对应列的宽度$(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());});}} else {// 同样,只有当dataScroll为true的时候,才隐藏,因为如果是false,它就已经是隐藏了的if (dataScroll) {$tScroll.data("scroll", false).hide();}}});});
</script>

html - 表头固定在顶部的一种实现思路相关推荐

  1. HTML table表头固定(自己做项目使用的几种方法)

    还记得之前公司需要做表头固定,但是由于基础太差,去查了好多好多文档.最后总结出几个不错的方法和插件. 一.使用css + js来实现表头固定 使用css定位th 根据父级滚动条scrolltop的偏移 ...

  2. 微信小程序展示列表之表头固定顶部

    微信小程序表头固定顶部 下面的例子适合 于 表头直接在顶部的需求 没有查询条件之类的组件在上面 wxml中的代码 的关键代码是 style="position:fixed; top:0;&q ...

  3. alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案

    一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...

  4. bootstrap-table固定表头固定列

    bootstrap-table固定表头固定列 1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-tabl ...

  5. bootstrap 表格表头固定

    效果 效果是在pc端和移动端能够使表格的表头固定,并且在顶部,支持缩放时布局不乱. 核心技术 利用css的position:fixed 属性来脱离文档流,达到表头固定的效果. 代码 说明都在代码里面, ...

  6. bootstrap Table表头固定

    简介 bootstrap Table的使用方法不多介绍,可参考官方说明文档,地址:http://bootstrap-table.wenzhixin.net.cn/documentation/ 表头固定 ...

  7. 滚动页面,实现导航栏固定在顶部(吸顶效果)

    内容说明 页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...

  8. css方法实现表格表头固定,横向纵向可滑动

    介绍一种用css实现表格表头固定,横向纵向可滑动的方法 先用一个div把表格包起来,表格给定高宽,overflow:scroll. 然后给表头写一个黏性布局 position: sticky:top: ...

  9. bootstrap表头如何展示不动_bootstrap-table固定表头固定列

    1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js data-tog ...

最新文章

  1. 【廖雪峰python入门笔记】切片
  2. 数据结构与算法实验祝恩_《数据结构与算法》实验教学大纲
  3. PyQt5 技术篇 - Qt Designer怎么用styleSheet设置按钮的背景
  4. 怎样实现关闭connection时自动关闭Statement和ResultSet
  5. 【原创】二级指针中在内存中的样子
  6. 阿里巴巴DevOps实践指南 | 为什么DevOps的必然趋势是BizDevOps?
  7. [渝粤教育] 西南科技大学 高级语言程序设计(Java) 在线考试复习资料
  8. TaskScheduler相关
  9. 维大杀器来了,未来云上服务器或将实现无人值守
  10. Spring整合Mybatis和JUnit
  11. 同频切换的事件_LTE前台路测切换问题处理大礼包
  12. outlook常见错误分析指南
  13. Jenkins的系统设置
  14. 源代码仓库选择-gitlab
  15. php中读取session,php中如何注册和读取Session会话
  16. 手Q支付Android开发面试前小记
  17. 如何设置计算机自动连接宽带,宽带连接怎么设置,怎么设置宽带自动连接
  18. bboss quartz定时任务使用案例介绍
  19. 用python决定吃什么_如何决定今天吃什么?
  20. 一切测试的基础——测试用例设计

热门文章

  1. sqlserver 2008 r2 下载地址和序列号,可用迅雷下载
  2. 计算机网络原理选择题
  3. Android带三角形的弹窗,andriod开发 利用.9图制作带三角形指示的popwindow弹窗
  4. zk-creds: Flexible Anonymous Credentials from zkSNARKs and Existing Identity Infrastructure
  5. 《Photoshop Lightroom4 经典教程》—第2课2.4节使用左侧和右侧面板组
  6. jvm crash分析
  7. centos随机名、自我保护的木马病毒 清除小记
  8. Java8实战学习笔记(三)——函数式数据处理
  9. 软件测试的8.20原则,四个维度,拆解「软件测试中的80 / 20原则」
  10. 华硕R414U详细拆机装内存条步骤!