`

table固定表头v3

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="./js/jquery-1.3.2.js"></script>
	<style>
    table.gridtable {
		font-family: verdana,arial,sans-serif;
		font-size:11px;
		color:#333333;
		border-width: 1px;
		border-color: #5CB8E6;
		border-collapse: collapse;
	}
	table.gridtable thead tr th {
		border-width: 1px;
		padding: 8px;
		font-size:1.1em;
		font-weight:bold;
		text-align:left;
		color:#FFFFFF;
		border-style: solid;
		border-color: #5CB8E6;
		background-color: #5CB1E7;
	}
	
	table.gridtable thead tr td {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #5CB8E6;
		background-color: #F0FAFF;
	}
	
	table.gridtable tbody tr td {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #5CB8E6;
		background-color: #ffffff;
	}
	</style>
    <script type="text/javascript">
        /*
        * Auther:Mike.Jiang
        * Email: dataadapter@hotmail.com
        * Date: 2012-09-05
        */
        /*
        主要思想:
        1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
        2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
        */
        (function ($) {
            $.fn.extend({
                FixedHead: function (options) {
                    var op = $.extend({ tableLayout: "auto" }, options);
                    return this.each(function () {
                        var $this = $(this); //指向当前的table
                        var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV,这个DIV要自己手动加上去
                        $thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上,再加一个DIV
                        var x = $thisParentDiv.position();

                        var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
                    .insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV,此DIV用来包装tabelr的表头
                    .css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });

                        var $thisClone = $this.clone(true);
                        $thisClone.find("tbody").remove(); //复制一份table,并将tbody中的内容删除,这样就仅余thead,所以要求表格的表头要放在thead中
                        $thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中

                        $this.css({ "marginTop": 0, "table-layout": op.tableLayout });
                        //当前TABLE的父级DIV有水平滚动条,并水平滚动时,同时滚动包装thead的DIV
                        $thisParentDiv.scroll(function () {
                            fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
                        });

                        //因为固定后的表头与原来的表格分离开了,难免会有一些宽度问题
                        //下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
                        var $fixHeadTrs = $thisClone.find("thead tr");
                        var $orginalHeadTrs = $this.find("thead");
                        $fixHeadTrs.each(function (indexTr) {
                            var $curFixTds = $(this).find("td");
                            var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
                            $curFixTds.each(function (indexTd) {
                                $(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
                            });
                        });
                    });
                }
            });
        })(jQuery);
        $(document).ready(function () {
            $("#tbTest").FixedHead({ tableLayout: "fixed" });
        });
    </script>
</head>
<body>
    <div style="height: 200px; width: 100%; overflow: auto;">
        <table id="tbTest" class="gridtable"   style="width:100%;">
			<col width="10%" />
			<col width="20%" />
			<col width="20%" />
			<col width="20%" />
			<col width="20%" />
			<col width="10%" />
            <thead>
				<tr>
                    <th colspan="6">
                        项目
                    </th>
                </tr>
                <tr>
                    <td style="width: 10%;">
                        项目
                    </td>
                    <td colspan="2">
                        常规性税金
                    </td>
                    <td colspan="2">
                        非常规性税金
                    </td>
                    <td style="width: 10%;">
                        工程税
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="width: 10%;">
                        0.2
                    </td>
                    <td>
                        11111111111111111.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

 

分享到:
评论

相关推荐

    v3+antd基础table框架页面

    本项目以"v3+antd基础table框架页面"为主题,聚焦于使用Vue 3(Vue.js的最新版本)与Ant Design Vue(简称antd)的Table组件来创建一个基础的数据展示页面。下面将详细探讨这一主题涉及的知识点。 首先,Vue 3带来...

    ACPI规范 IORT 表格

    - **表头**:包含了表格的标识符、版本号等基本信息。 - **条目列表**:每个条目描述了一个I/O设备或一组设备的信息,如设备类型、地址范围、转换规则等。 - **结束标记**:用于指示表格的结尾。 #### IORT表格的...

    整理了12款Javascript 表格控件(DataGrid)

    11. Table widget:这个控件可以将普通的HTML表格转化为可排序、固定表头的表格,增强了表格的互动性。 12. jExpand:这是一个jQuery插件,能让表格单元格展开以显示更多的内容,如图片、列表和图表,优化了表格的...

    jtable增删改查和jtree连接

    import javax.swing.table.*; import javax.swing.tree.DefaultMutableTreeNode; import javax.swing.tree.DefaultTreeCellRenderer; import javax.swing.tree.DefaultTreeModel; import javax.swing.tree....

    [AB PLC例程源码][MMS_044666]Translation N-A.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    kolesar_3cd_01_0716.pdf

    kolesar_3cd_01_0716

    latchman_01_0108.pdf

    latchman_01_0108

    matlab程序代码项目案例:matlab程序代码项目案例MPC在美国高速公路场景中移动的车辆上的实现.zip

    matlab程序代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    pimpinella_3cd_01_0716.pdf

    pimpinella_3cd_01_0716

    petrilla_01_0308.pdf

    petrilla_01_0308

    [AB PLC例程源码][MMS_041452]Speed Controls in Plastic Extrusion.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    强化学习驱动下DeepSeek技术创新及其对AI发展的影响

    内容概要:本文档由张卓老师讲解,重点探讨DeepSeek的技术革新及强化学习对未来AI发展的重要性。文章回顾了AI的历史与发展阶段,详细解析Transformer架构在AI上半场所起到的作用,深入介绍了MoE混合专家以及MLA低秩注意机制等技术特点如何帮助DeepSeek在AI中场建立优势,并探讨了当前强化学习的挑战和边界。文档不仅提及AlphaGo和小游戏等成功案例来说明强化学习的强大力量,还提出了关于未来人工通用智能(AGI)的展望,特别是如何利用强化学习提升现有LLMs的能力和性能。 适用人群:本资料适宜对深度学习感兴趣的研究人员、开发者以及想要深入了解人工智能最新进展的专业人士。 使用场景及目标:通过了解最新的AI技术和前沿概念,在实际工作中能够运用更先进的工具和技术解决问题。同时为那些寻求职业转型或者学术深造的人提供了宝贵的参考。 其他说明:文中提到了许多具体的例子和技术细节,如DeepSeek的技术特色、RL的理论背景等等,有助于加深读者对于现代AI系统的理解和认识。

    有师傅小程序开源版v2.4.14+前端.zip

    有师傅小程序开源版v2.4.14 新增报价短信奉告 优化部分细节

    [AB PLC例程源码][MMS_047333]Motor Sequence Starter with timers to start.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    商城二级三级分销系统(小程序+后台含源码).zip

    商城二级三级分销系统(小程序+后台含源码).zip

    li_3ck_01b_0918.pdf

    li_3ck_01b_0918

    nicholl_3cd_01_0516.pdf

    nicholl_3cd_01_0516

    1995-2022年 网络媒体关注度、报刊媒体关注度与媒体监督相关数据.zip

    媒体关注度是一个衡量公众对某个事件、话题或个体关注程度的重要指标。它主要反映了新闻媒体、社交媒体、博客等对于某一事件、话题或个体的报道和讨论程度。 媒体监督的J-F系数(Janis-Fadner系数)是一种用于测量媒体关注度的指标,特别是用于评估媒体对企业、事件或话题的监督力度。J-F系数基于媒体报道的正面和负面内容来计算,从而为公众、研究者或企业提供一个量化工具,以了解媒体对其关注的方向和强度。 本数据含原始数据、参考文献、代码do文件、最终结果。参考文献中JF系数计算公式。 指标 代码、年份、标题出现该公司的新闻总数、内容出现该公司的新闻总数、正面新闻数全部、中性新闻数全部、负面新闻数全部、正面新闻数原创、中性新闻数原创、负面新闻数原创,媒体监督JF系数。

    [AB PLC例程源码][MMS_040315]Double INC and Double DEC of INT datatype.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_047773]Convert Feet to Millimeters.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

Global site tag (gtag.js) - Google Analytics