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的列头不动的更多相关文章

  1. 使用css固定table第一列

    .table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: c ...

  2. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  3. jquery固定表头和列头

    1.对网上的开源方法稍作了些修改 <script type="text/javascript">// <![CDATA[ function FixTable(Ta ...

  4. 利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

  5. 利用JS实现HTML TABLE的分页

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

  6. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  7. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  8. html table 固定表头和列

    /**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...

  9. 利用JS脚本通过getAttribute()和setAttribute()等对CSS样式进行操作

    HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...

随机推荐

  1. iOS9对SDK的影响(iOS9适配必看)

      1.大部分社交平台接口不支持https协议. 问题描述:在iOS9下,系统默认会拦截对http协议接口的访问,因此无法获取http协议接口的数据.对ShareSDK来说,具体表现可能是,无法授权. ...

  2. EF6 在原有数据库中使用 CodeFirst 总复习(五、生成发帖页面)

    有点与在原有数据库中使用 CodeFirst 远了,不过是总复习吗,总得全面点. 一.在用户表(Users)中插入两个用户 二.生成发帖界面 MVC生成的界面很多,也没使用Ajax,实际开发中很少会使 ...

  3. 第二百二十六天 how can I 坚持

    今天弟弟生日,只是简单的说了句生日快乐,幸亏看了下日历,要不又忘了. 在家待了一天. 明天还想去爬山,八大处太远了,该去哪呢. 不想在家待着. 日复一日,啊,年复一年啊.想想好可怕,人生,太快.该如何 ...

  4. webrtc--AudioProcessing的使用

    1.AudioProcessing的实例化和配置: AudioProcessing* apm = AudioProcessing::Create(0); apm->level_estimator ...

  5. 深入学习JavaScript对象

    JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢? 一.概述 对象是一种复合值,它将很多值(原始 ...

  6. HDU 2256 Problem of Precision (矩阵快速幂)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2256 最重要的是构建递推式,下面的图是盗来的.貌似这种叫共轭数. #include <iostr ...

  7. 非阻塞同步机制与CAS操作

    锁的劣势 Java在JDK1.5之前都是靠synchronized关键字保证同步的,这种通过使用一致的锁定协议来协调对共享状态的访问,可以确保无论哪个线程 持有守护变量的锁,都采用独占的方式来访问这些 ...

  8. kindeditor html代码过滤不能保存

    这是因为编辑器默认开启了过滤模式(filterMode:true).当filterMode为true时,编辑器会根据htmlTags设定自动过滤HTML代码,主要是为了生成干净的代码.如果想保留所有H ...

  9. Objc基础学习记录2

    1.[类 方法名]; //类方法,-静态成员函数, + (void)fun; 2.[对象名 方法名]; //实例方法, -非静态成员函数, - (void) fun; 3.带有冒号必须要有参数; 4. ...

  10. VC++ 6.0中实现三叉切分窗口与多视图 [转]

    一.引用 当用户需要同时对文当的不同部分进行编辑时,常常会用到切分窗口;这些窗口可以都是相同的视,或者一个窗口为列表视,而另一个为树型视图.应用程序框架有多种方式来表示多视图,切分窗口是其中的方式之一 ...