<head>

    <meta name="viewport" content="width=device-width" />

    <title>Test02</title>

    <script src="~/Content/js/jquery-1.7.2.min.js"></script>

    <script>

        $(document).ready(function () {

            $("#tabhead").css("width", $("#MyTable").css("width"));

            $("#tabdiv").scroll(function () { // 滚动条移动事件

                var yheight = $("#tabdiv").scrollTop(); // 滚动条距顶端的距离

                $("#tabhead").css("top", yheight + "px");

            });

        });

    </script>

</head>
<body>

    <div id="tabdiv" style="width: 500px; height: 150px; overflow: auto; position: relative; ">

        <table id="MyTable" style=" text-align: center; table-layout: fixed; width: 100%;margin-top:50px;">

            <col width="105" />

            <col width="105" />

            <col width="70" />

            <col width="70" />

            <col width="70" />

            <col width="80" />

            <col width="80" />

            <col width="80" />

            <thead id="tabhead" style="position: absolute;width:100%; top:0px;background-color:lightblue;">

                <tr style="">

                    <th colspan="2" style="width: 210px;"><input type="checkbox" class="chbAll" checked="checked">课程</th>

                    <th style="width:70px;">总分</th>

                    <th style="width: 70px;">总分排名</th>

                    <th style="width: 70px;">平均分</th>

                    <th style="width: 80px;">平均分排名</th>

                    <th style="width: 80px;"> <input type="checkbox" class="chbKC" checked="checked">数学<br>百分制</th>

                    <th style="width: 80px;"> <input type="checkbox" class="chbKC" checked="checked">语文<br>等级制</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>---</td>

                    <td>---</td>

                    <td>---</td>

                    <td>---</td>

                    <td>---</td>

                    <td>---</td>

                    <td>---</td>

                    <td>---</td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

只用几行js，加几个css样式。不用贴层或改动表结构。（测试时请多加几行tr）

结果如图：上下滚动，thead不动；左右滚动，thead跟随移动

分析：

将thead 设为absolute定位，使之脱离文档流，再获取垂直滚动条距离顶部的滚动距离，作为thead 的top位置，并实时同步。

问题一：thead 脱离文档流后，超出tabdiv不会隐藏，且tbody上部会被遮挡。

解决：1，将tabdiv设为relative或absolute定位；2，为table加上上边距来抵消thead的高度，margin-top:50px;。

问题二：table超出div宽度后，tbody单元格会自动被压缩。

解决：table 样式加上table-layout: fixed; width: 100%;

并通过<col />元素来设置每列宽度。

问题三：thead超出div宽度后，thead单元格会自动被压缩，而tbody正常显示。

解决：js中直接将thead的宽度设为table的宽度，$("#tabhead").css("width", $("#MyTable").css("width"));

js简单固定table表头及css问题分析。的更多相关文章

  1. 固定table表头

    <style> #box{ height:214px; width:500px; overflow-y:auto;/** 必须,否则当表格数据过多时,不会产生滚动条,而是自动延长该div的 ...

  2. [转] js实现html table 行，列锁定

    js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...

  3. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  4. 网页制作中在头部固定悬浮table表头(thead)的方法

    这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...

  5. jQuery,Table表头固定插件chromatable存在的问题及解决办法

    在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

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

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

  7. Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"

    Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...

  8. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

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

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

随机推荐

  1. SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表

    SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表 SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表 2013-10-09 23:09 by BI Wor ...

  2. ios学习之常见问题记录

    使用Core Data的好处和缺点? 首先这是apple官方极力推荐的,使用它而不是SQLite.好处有大概这么几点:1.减少你model层的代码量,减少50%-70%.无需测试和优化.2.提供了内存 ...

  3. Web API 入门指南

    Web API 入门指南 - 闲话安全2013-09-21 18:56 by 微软互联网开发支持, 231 阅读, 3 评论, 收藏, 编辑 Web API入门指南有些朋友回复问了些安全方面的问题,安 ...

  4. 实现Launcher编辑模式(1) 壁纸更换

    Android Launcher分析和修改13——实现Launcher编辑模式(1) 壁纸更换 Posted on 2013-09-11 23:25 泡泡糖 阅读(212) 评论(3) 编辑 收藏 已 ...

  5. Entity Framework实体模型 入门视频教程

    Entity Framework实体模型 入门视频教程 恢复内容开始--- 第一步 创建一个 控制台应用程序 第二步 创建一个ADO.NET 数据实体模型 DbModel.edmx 需要跟数据库进行连 ...

  6. 安装linux版qq，安装二进制包编译器，安装mysql-5.6.11,删除已安装或安装失败的mysql-5.6.11,简单mysql练习题

    上午[root@localhost ~]# ./test3.sh dev1^C[root@localhost ~]# groupadd dev1[root@localhost ~]# vim /etc ...

  7. T-SQL编程的基本语法和思想

    通过一个很实用的例子让你学会T-SQL编程的基本语法和思想   例子需求:把Execl中的三级分类(列别的三级联动)数据导入到数据库中. Excel表中数据的显示格式: 图1 数据库中表的显示格式: ...

  8. 一步一步深入spring(5)--使用基于注解的spring实现 AOP

    1.要利用spring aop,至少需要添加以下jar包 使用spring需要的jarspring.jar .commons-logging.jar 使用切面编程(AOP)需要的jar aspectj ...

  9. jquery 表单 清空

    做了个复杂查询的页面,字段太多了,填了一次,想清空挺麻烦的 $('#myform')[0].reset(); 虽然reset方法可以做到一部分,但是如果你有个元素是这样的 <input name ...

  10. Ubuntu 下的环境变量配置

    网上很多配置jdk环境变量的方法,但是几乎都会下次重启电脑就失效,或者时不时的失效.下面教你一招 JDK环境变量配置如下: 执行命令sudo gedit /etc/environment,在打开的编辑 ...