<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. namespace 的作用

    在写CPP的时候,常常要写using namespace std;这么一句话,到底有什么用呢? #include <iostream> namespace first { ; } name ...

  2. YSlow的性能测试提示

    Add an Expires or a Cache-Control Header tag: server There are two aspects to this rule: For static ...

  3. 利用ie的behavior属性兼容css3的一些属性

    behavior是从Internet Explorer 5开始引入的,是一种通过使用 CSS 向 HTML 元素添加行为的方法. 但是只有 Internet Explorer 支持 behavior ...

  4. 新手教程：wordpress博客安装图文教导

    每一个建立博客的新朋友,当准备好域名和主机后,不知道怎么安装博客,我刚建立昆明SEO的时候,也费了很多时间,终于搭建成功,下面是我一步一步实战得来的总结. 第一步:域名解析,根据域名注册商不同,解析操 ...

  5. .NET：国际化和本地化

    .NET:国际化和本地化 背景 国际化(i18n)和本地化(l10n)是高端程序的必备技术,可惜从业五年从没有尝试过,下一步准备做一个多用户的博客系统,想支持多语言,今天就学习了一下,写出来,希望大家 ...

  6. a5站长论坛和s8站长论坛-网上兼职做任务赚钱的两大网站

     1.什么是做任务赚钱? 简而言之,就是你做别人不在行而你在行的技术 ,如 图片美化 网站建设 网站修改 网站推广等网络业务. 2.任务赚钱有什么特点? 完全免费,你付出的是技术和时间,完全免费,不过 ...

  7. ios的自动转屏

    在IOS6以前,设置转屏需要用到方法 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)x 在6以后,取代它 ...

  8. Bitmap的一个简单实现

    一.Bitmap简介 Bitmap是一种常用的数据结构,其实就是一个连续的数组,主要是用于映射关系,如映射整数,一位代表一个数,即这里假设Bitmap有100Bytes * 8 这么多的位,那么这里可 ...

  9. android电源“有毒”移动电源Android版的设计及其实现

    工作之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下android电源 报道http://www.cnbeta.com/articles/239726.htm称:安全研 ...

  10. mybatis使用@param后掉的坑

    项目里面的一个分页拦截器内某段代码需要判断传入的参数是否属于摸个特定的类,如果不是就直接执行下面的流程,坑爹的@param,在DAO里传入的参数前面加上了这个注解,mabaits内部将传入的参数变成了 ...