js简单固定table表头及css问题分析。

时间：2021-03-17 23:22:20
<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跟随移动

js简单固定table表头及css问题分析。

分析：

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

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

js简单固定table表头及css问题分析。

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

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

js简单固定table表头及css问题分析。

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

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

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

js简单固定table表头及css问题分析。

解决：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. &lbrack;转&rsqb; js实现html table 行，列锁定

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

  3. table 表头固定 thead固定&period; 1&rpar; 使用jquery&period;freezeheader&period;js

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

  4. 网页制作中在头部固定悬浮table表头&lpar;thead&rpar;的方法

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

  5. jQuery&comma;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&lpar;7月14&rpar; 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format&colon;&quot&semi;&bsol;&commat;&quot&semi;

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

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

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

  9. &lpar;转&rpar;supertable像excel那样固定table的表头和第一列

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

随机推荐

  1. 原生JS实现&quot&semi;旋转木马&quot&semi;效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  2. Java IO4：字符编码

    前言 字符编码,这本不属于IO的内容,但字节流之后写的应该是字符流,既然是字符流,那就涉及一个"字符编码的"问题,考虑到字符编码不仅仅是在IO这块,Java中很多场景都涉及到这个概 ...

  3. 显示HTML文本

    + (NSAttributedString*)getAttributedStringFromHtmlString:(NSString*)htmlString{ return [[NSAttribute ...

  4. javascript eval函数解析json数据时为什加上圆括号eval&lpar;&quot&semi;&lpar;&quot&semi;&plus;data&plus;&quot&semi;&rpar;&quot&semi;&rpar;

    原因很简单:因为在js中{}表示一个语句块(代码段),所有加上"()"表示表达式

  5. 一、Hbase的安装

    一.Hbase配置 这个是我从网上找的一个版本,网上说配置成功. 先决条件: (1)hadoop的版本与hbase的版本要对应,主要是hadoop目录下的hadoop-core-1.0.4.jar的版 ...

  6. &lbrack;shiro学习笔记&rsqb;第二节 shiro与web融合实现一个简单的授权认证

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39933993 shiro官网:http://shiro.apache.org/ shi ...

  7. BZOJ 1305--&lbrack;CQOI2009&rsqb;dance跳舞（最大流）

    1305: [CQOI2009]dance跳舞 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 4150  Solved: 1792[Submit][St ...

  8. October 09th 2017 Week 41st Monday

    My motto is: Contended with little, yet wishing for more. 我的座右铭是:为一点点感到满足,但希望获得更多. If you can live y ...

  9. 一步一步搭建oracle 11gR2 rac&plus;dg之共享磁盘设置&lpar;三&rpar;【转】

    一步一步在RHEL6.5+VMware Workstation 10上搭建 oracle 11gR2 rac + dg 之共享磁盘准备 (三) 注意:这一步是配置rac的过程中非常重要的一步,很多童鞋 ...

  10. 七、CentOS 6&period;5 下 Nginx的反向代理和负载均衡的实现

    CentOS 6.5 下 Nginx的反向代理和负载均衡的实现 * 修复上面文章的问题: 复制出一个tomcat2之后,修改service.xml文件时,要修改三个端口: 1. <!-- 800 ...

相关文章