<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. 使用STL处理分支限界法处理最优装载问题

    使用STL处理分支限界法处理最优装载问题 #include <iostream>#include <vector>#include <queue>#include ...

  2. IT职位分析

    人才市场的IT职位分析   最近要找长沙的工作,于是通过湖南人才市场搜索了一下职位.结果得到的数据让我很难比较,作为一个 IT 业滚爬了多年的程序员,对这样的搜索结果很不满意.于是,我不得不自己来整理 ...

  3. JavaScript判断对象的类型

    JavaScript判断对象的类型 最近阅读了一些关于JavaScript判断对象类型的文章.总结下来,主要有constructor属性.typeof操作符.instanceof操作符和Object. ...

  4. linux下面配置安装nodejs+npm

    linux下 多亏这一篇文章= =我就卡死在文章所说的这个点里 附大牛链接:http://blog.sitearth.com/nodejs%E4%B8%8A%E4%BD%BF%E7%94%A8mong ...

  5. 使用CLR Profiler分析.NET程序

    使用CLR Profiler分析.NET程序 就像剥去.NET语法糖衣的工具(Reflector等)很多一样,我们可以用来分析.NET程序性能的工具有很多,如前面一片博文DebugLZQ给大家介绍的v ...

  6. 图解JOIN

    阅读导航 一.概要 二.JOIN分类 三.JOIN分类详解 一.概要 JOIN对于接触过数据库的人,这个词都不陌生,而且很多人很清楚各种JOIN,还有很多人对这个理解也不是很透彻,这次就说说JOIN操 ...

  7. python alembic which comes from SQLalchemy

    alembic it's tutorial: http://alembic.readthedocs.org/en/latest/tutorial.html

  8. 解决TXT乱码问题

    初装Ubuntu,打开windows保存的txt文件很可能会遇到各种乱码问题. 下面是wiki ubuntu里的解决办法: Gedit中文乱码 缺省配置下,用 Ubuntu 的文本编辑器(gedit) ...

  9. [bzoj2957][楼房重建] (线段树)

    Description 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子. 为了简化问题,我们考虑这些 ...

  10. AI(三)：微信与luis结合(上)

    目录 基本原理 公众号申请及配置 验证服务器有效性 微信请求消息类型 基本原理 基本原理如上图:腾讯微信服务器就相当于一个转发服务器,终端(手机.Pad等)发起请求至微信服务器,微信服务器然后将请求转 ...