利用js、css、html固定table的列头不动
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>
利用js、css、html固定table的列头不动的更多相关文章
- 使用css固定table第一列
.table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: c ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- jquery固定表头和列头
1.对网上的开源方法稍作了些修改 <script type="text/javascript">// <![CDATA[ function FixTable(Ta ...
- 利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...
- 利用JS实现HTML TABLE的分页
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...
- 固定Table的头部和左边的列-在Knockout Js使用场景下
要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...
- (转)supertable像excel那样固定table的表头和第一列
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
- html table 固定表头和列
/**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...
- 利用JS脚本通过getAttribute()和setAttribute()等对CSS样式进行操作
HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...
随机推荐
- 在适配iPhone 6 Plus屏幕的时候,模拟器上两边有很细的白边如何解决
取消掉Constrain to margin 然后添加左右约束 版权声明:本文为博主原创文章,未经博主允许不得转载.
- openstack neutron 各节点网络配置
- table表格的属性
border="1"----边框 cellpadding="10%"----单元边缘与其内容之间的空白距离 cellspacing="10%" ...
- KM算法详解+模板
http://www.cnblogs.com/wenruo/p/5264235.html KM算法用来求二分图最大权完美匹配. 本文配合该博文服用更佳:趣写算法系列之--匈牙利算法 现在有N男N女,男 ...
- 导出Excel Gridview
/// <summary> /// 定义导出Excel的函数 /// </summary> /// <param name="FileType ...
- quartz中关键类
job job是一个接口,你对某一类job的定义,可以通过实现该接口来实现.例如为销售报告定义一个SalesReportJob,包含变量name. job可以使用的几个注解 @DisallowConc ...
- WinHTTP Web Proxy Auto-Discovery Service
下面是网上搜集的,个人没有做测试,----------------------------- WinHTTP Web Proxy Auto-Discovery Service 服务成功发送一个 开始 ...
- MFC消息响应机制 q
MFC消息响应机制分析 1 引言微软公司提供的MFC基本类库(Microsoft Foundation Classes),是进行可视化编程时使用最为流行的一个类 库.MFC封装了大部分Windows ...
- UVa 297 - Quadtrees
题目:利用四叉树处理图片,给你两张黑白图片的四叉树,问两张图片叠加后黑色的面积. 分析:搜索.数据结构.把图片分成1024块1*1的小正方形,建立一位数组记录对应小正方形的颜色. 利用递归根据字符串, ...
- [读书笔记]SQL约束
目的:通过在列级或表级设置约束,确保数据符合某种数据完整性规则 实现:数据库主动地检查维护数据的完整性 手段:约束,数据类型,触发器 --------------------------------- ...