JaveScript-解决表格使用滚动条时冻结表头栏问题
解决方法：
//设置表格表头里的th==表格内容里的td
function ThEqualTd(thId, tdId) {
var tdNum = document.getElementById(tdId).rows[0].cells.length;//获取tdId表格中的第一行的列数
var tdW = "";//清空tdW的宽度
for (i = 0; i < tdNum; i++) {
tdW = document.getElementById(tdId).rows[0].cells[i].offsetWidth;//获取tdId表格中的第一行第i列的宽度，定义其等于tdW
document.getElementById(thId).rows[0].cells[i].width = tdW;//设置thId表格的第一行第i列的宽度=tdW
}
}
这里就本人的leonaScroll-1.3.js滚动条插件遇到的上述问题做详细说明
根据滚动条，我们做好布局，如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="jquery-1.10.2.js"></script>
<script src="leonaScroll-min-1.3.js"></script>
</head>
<body>
<style>
.table{width:500px; height:400px;border:1px solid #b6ff00; border-radius:10px; }
.table table{ line-height:25px;border:1px solid #000000; }
.table table td,.table table th{height:25px; text-align:center; }
</style>
<div class="table">
<table>
<tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</table>
</div>
<script>
$(".table").LeonaScroll();
</script>
</body>
</html>
问题：上述代码可以实现表格内容超出.table界定的400px时就，出现滚动条，并可以滚动显示内容，但是却出现一个问题，那就是我们的表头也会随内容一起向上滚动，以至于用户在查看地下内容时无法直观的看见我们的表头，而使表格做不到一目了然。针对这个问题，我做了以下处理：
1、首先将HTML的布局做调整，将表头和内容分别写在不同的table里，如下：
<style>
.all{width:500px; height:400px;border:1px solid #b6ff00; border-radius:10px; }
table td,.table table th{height:25px; text-align:center; }
.tableTh{width:100%; height:25px; }
.tableTd{width:100%; height:375px;}
.tableTd table{ line-height:25px;border:1px solid #000000; } </style> <div class="all"><!--整体全部（表头+外框）--> <table class="tableTh"><tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th></tr></table><!--表头--> <div class="tableTd"><!--外框（内容+滚动条）-->
<table><!--内容-->
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</table>
</div>
</div>
<script>
$(".tableTd").LeonaScroll();
</script>
2、这样，由于表头与内容分隔，且表头不在滚动文本内容区域内，再滚动时，就会发现表头会一直冻结在表格内容之上。但是正因为分隔到不同的table中，又出现了一个问题，表格的th与td宽度不等。
这里如果你的td是设定死的宽度，那就很好办了，th宽度=td宽度就好了。然后很多时候我们使用表格，他的td是随内容长度大小去自适应变更的，所以这个时候我们就需要下面这段js，使他们实时相等了。
在这里我讲这段封成了一个方法，以便其调用：
<script>
$(".tableTd").LeonaScroll();//滚动条调用 ThEqualTd("tabTh", "tabTd");//调用th=td //设置表格表头里的th==表格内容里的td
function ThEqualTd(thId, tdId) {
var tdNum = document.getElementById(tdId).rows[0].cells.length;//获取tdId表格中的第一行的列数
var tdW = "";//清空tdW的宽度
for (i = 0; i < tdNum; i++) {
tdW = document.getElementById(tdId).rows[0].cells[i].offsetWidth;//获取tdId表格中的第一行第i列的宽度，定义其等于tdW
document.getElementById(thId).rows[0].cells[i].width = tdW;//设置thId表格的第一行第i列的宽度=tdW
}
}
</script>
3、恩，差不多可以看到效果了，但是，还差最后一步，也是细节，不可忽视哟！那就是我们还应该在考虑到滚动条占的位置，也就是我们的th表头里是没有滚动条的，然而，为了让表格的表头和内容更加协调。我们应该再加一个空的th，给其设置宽度等于滚动条所占的宽度，如下：
<table class="tableTh" id="tabTh"><tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th width="14"></th></tr></table><!--表头-->4、
ok，这下就大功告成了。
作者：leona
JaveScript-解决表格使用滚动条时冻结表头栏问题的更多相关文章
- 解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题
问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...
- WPF拖动DataGrid滚动条时内容混乱的解决方法
WPF拖动DataGrid滚动条时内容混乱的解决方法 在WPF中,如果DataGrid里使用了模板列,当拖动滚动条时,往往会出现列表内容显示混乱的情况.解决方法就是在Binding的时候给Update ...
- QRowTable表格控件(五)-重写表头排序、支持第三次单击恢复默认排序
目录 一.原生表格 二.效果展示 三.实现方式 1.排序列定制 2.排序交互修改 四.相关文章 原文链接:QRowTable表格控件(五)-重写表头排序.支持第三次单击恢复默认排序 一.原生表格 开发 ...
- 解决表格里面使用text-overflow后依旧不能隐藏超出的文本
解决表格里面使用text-overflow后依旧不能隐藏超出的文本 来源: http://blog.csdn.net/colinmuxi/article/details/9069595 (非原创,自 ...
- Css解决表格超出部分用省略号显示
小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...
- 解决CSharpGL使用CGCompiler时发现的几个问题
解决CSharpGL使用CGCompiler时发现的几个问题 为了获取CSharpShadingLanguage的token流,我设计了这样一个文法: <Expression> ::= & ...
- 解决远程桌面链接时出现"The RPC server is unavailable."或"RPC服务器不可用"的问题
解决远程桌面链接时出现"The RPC server is unavailable."或"RPC服务器不可用"的问题 解决远程桌面链接时出现"The ...
- js Table冻结表头示例代码
Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头 function ...
- Swift - 将表格UITableView滚动条移动到底部
有时我们需要通过代码自动将表格UITableView滚动条移动到尾部,只需要使用scrollToRowAtIndexPath方法即可,代码如下: 1 2 3 4 5 var secon = 1 //最 ...
随机推荐
- IOS学习之-私人通讯录
通过一段时间IOS的学习完成了一个简单的应用,"私人通讯录". 运行效果如下图: 1.登录页 2.通讯录列表 3.添加 4.编辑 5.删除 6.注销 总视图结构如下图: 总结本程序 ...
- LINQ to SQL语句(18)之运算符转换
运算符转换 1.AsEnumerable:将类型转换为泛型 IEnumerable 使用 AsEnumerable<TSource> 可返回类型化为泛型 IEnumerable 的参数.在 ...
- Python ZIP 文件创建与读取
Automate the Boring Stuff 学习笔记 02 Python 内置的 zipfile 模块可以对文件(夹)进行ZIP格式的压缩和读取操作.要进行相关操作,首先需要实例化一个 Zip ...
- entityframework学习笔记--006-表拆分与实体拆分
1.1 拆分实体到多张表 假设你有如下表,如图6-1.Product表用于存储商品的字符类信息,ProductWebInfo用于存储商品的图片,两张表通过SKU关联.现在你想把两张表的信息整合到一个实 ...
- 16款最佳的 jQuery Time Picker 时间选择插件
jQuery 插件可以为你做许多事情,你可以很容易地把这些插件集成到您的网站.网络上的 jQuery 日期选择器和日历插件很多,但找不到很满意的时间选择器插件. 在这里,我们收集了最好的一组 jQue ...
- react native初步常见问题
首先按照资料一步步搭建环境运行,然后成功了,很激动,可是,安卓就是没这么容易成功,还是太年轻了 could not get batchedbridge, make sure your bundle i ...
- iOS开发-- 通过runtime kvc 移除导航栏下方的阴影效果线条
网上查了很多, 都是重新绘制, 感觉有点蠢, 恰巧工作有会闲, 就简单的通过runtime遍历了下属性找寻了下私有类和方法, 这里直接贴方法, 找寻过程也发出来, 能看懂的直接就能看懂, 看不太明白的 ...
- 获取iPhone手机的UDID和设备名称.
关于设备名称: iPhone的设备名称也可以在手机上面查看到:设置-通用-关于本机-名称(设备名称是可以自己改的) 关于UUID: 什么?用了iPhone这么久你不知道什么叫UDID! UDID 是由 ...
- Storm中遇到的日志多次重写问题（一）
业务描述: 统计从kafka spout中读取的数据条数,以及写入redis的数据的条数,写入hdfs的数据条数,写入kafaka的数据条数.并且每过5秒将数据按照json文件的形式写入日志.其中保存 ...
- SQL Server 2012 新特性：新增和修改函数
转换函数 1.PARSE Parse是把字符串类型转化为想要的类型,看看和convert和cast的区别 SELECT PARSE ('2.111111' AS f ...