转自：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>

然后，再放一个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>

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

#tScroll{position:fixed;top:0;display:none;
}

然后就是代码了。

<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 - 表头固定在顶部的一种实现思路相关推荐

HTML table表头固定（自己做项目使用的几种方法）
还记得之前公司需要做表头固定,但是由于基础太差,去查了好多好多文档.最后总结出几个不错的方法和插件. 一.使用css + js来实现表头固定使用css定位th 根据父级滚动条scrolltop的偏移 ...
微信小程序展示列表之表头固定顶部
微信小程序表头固定顶部下面的例子适合于表头直接在顶部的需求没有查询条件之类的组件在上面 wxml中的代码的关键代码是 style="position:fixed; top:0;&q ...
alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
bootstrap-table固定表头固定列
bootstrap-table固定表头固定列 1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-tabl ...
bootstrap 表格表头固定
效果效果是在pc端和移动端能够使表格的表头固定,并且在顶部,支持缩放时布局不乱. 核心技术利用css的position:fixed 属性来脱离文档流,达到表头固定的效果. 代码说明都在代码里面, ...
bootstrap Table表头固定
简介 bootstrap Table的使用方法不多介绍,可参考官方说明文档,地址:http://bootstrap-table.wenzhixin.net.cn/documentation/ 表头固定 ...
滚动页面，实现导航栏固定在顶部（吸顶效果）
内容说明页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...
css方法实现表格表头固定，横向纵向可滑动
介绍一种用css实现表格表头固定,横向纵向可滑动的方法先用一个div把表格包起来,表格给定高宽,overflow:scroll. 然后给表头写一个黏性布局 position: sticky:top: ...
bootstrap表头如何展示不动_bootstrap-table固定表头固定列
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js data-tog ...

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

先看效果图

再讲一下我的实现思路

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

最新文章

热门文章