锁定表头和固定列(Fixed table head and columns)

voidL123 voidL123 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 4.7k累计阅读 4.8k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
转载 最新推荐文章于 2026-04-28 10:10:26 发布 4.7k 阅读 AI 写同款· GEO 优化 ›
FixTable用例和源码 固定列头和固定表头的JS代码，支持IE6以上浏览器，只要注意使用容器的宽度和高度就可以玩转的简单插件。 立即下载

复制文章（原文）：https://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html

如使用jQuery1.9.x及以上版本，需要引用jQuery Migrate Plugin库，在jQuery官网即可下载到!

因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪念。

支持IE6+，FF3.6+，Opera9+，Chrome9+

一、实现方式

这里的准备使用4个table实现，具体如下图：

image

上图红色部分为要取出来的部分，蓝色部分为拼接后可以看到的部分。最终结果如下图

image

实现后效果：

姓名班级成绩
主科文科理科总分
语文数学英语政治历史地理物理化学生物
学生1班级364 104 150 93 32 82 26 44 83 678 
学生2班级2120 66 150 85 5 50 72 32 90 670 
学生3班级2133 61 49 97 67 13 64 8 60 552 
学生4班级37 136 105 86 56 11 98 29 18 546 
学生5班级2129 146 62 64 67 1 70 57 16 612 
学生6班级245 29 51 91 9 2 37 3 26 293 
学生7班级128 25 127 96 43 90 75 13 28 525 
学生8班级378 64 20 29 70 92 100 69 30 552 
学生9班级265 10 139 19 57 86 57 79 76 588 
学生10班级2113 142 4 100 41 69 12 45 20 546 
学生11班级341 84 42 23 89 88 6 4 21 398 
学生12班级14 102 111 61 76 12 25 66 39 496 
学生13班级249 144 56 75 18 58 39 13 88 540 
学生14班级1119 81 73 53 37 88 79 69 30 629 
学生15班级3120 78 86 58 50 7 20 42 24 485 
学生16班级165 71 9 64 45 31 18 53 5 361 
学生17班级172 139 24 20 39 49 19 21 23 406 
学生18班级350 84 53 70 77 81 38 80 25 558 
学生19班级156 147 134 59 57 31 48 86 7 625 
学生20班级1103 38 96 100 21 88 36 37 18 537 
学生21班级1133 150 28 37 96 88 12 36 87 667 
学生22班级2140 59 42 95 94 50 3 58 63 604 
学生23班级12 51 19 17 19 7 93 35 49 292 
学生24班级367 2 91 23 22 37 79 52 63 436 
学生25班级329 17 149 44 13 29 98 70 6 455 
学生26班级3126 117 112 11 100 55 87 1 18 627 
学生27班级3144 115 131 97 19 92 79 4 72 753 
学生28班级2107 77 143 94 89 90 35 70 3 708 
学生29班级314 33 44 78 5 67 27 49 23 340 
学生30班级377 117 51 75 74 43 25 2 24 488 
学生31班级176 140 148 50 100 33 83 81 23 734 
学生32班级129 25 146 28 79 73 47 8 91 526 
学生33班级296 44 121 3 4 94 17 20 19 418 
学生34班级297 48 68 82 39 16 24 79 79 532 
学生35班级3126 69 40 13 48 34 81 5 97 513 
学生36班级1144 24 18 71 58 21 12 95 45 488 
学生37班级123 94 93 78 46 88 72 15 90 599 
学生38班级273 103 45 17 69 18 3 67 55 450 
学生39班级319 16 36 18 50 48 19 75 24 305 
学生40班级16 44 50 73 58 21 84 49 68 453 
学生41班级294 98 24 34 52 27 87 95 1 512 
学生42班级227 68 60 75 93 4 38 44 27 436 
学生43班级3102 146 138 72 58 19 34 57 60 686 
学生44班级251 81 150 95 8 48 96 90 66 685 
学生45班级193 37 109 84 100 59 90 59 81 712 
学生46班级2125 60 32 70 93 65 74 44 77 640 
学生47班级1139 45 52 54 6 64 46 45 66 517 
学生48班级214 73 118 4 36 43 24 8 73 393 
学生49班级345 114 114 6 65 94 32 30 1 501 
学生50班级2112 77 19 33 30 32 90 18 77 488 
学生51班级219 66 140 36 44 34 62 17 34 452 
学生52班级261 98 107 78 2 17 54 28 89 534 
学生53班级148 23 65 23 70 58 36 45 75 443 
学生54班级181 9 46 37 86 87 83 39 63 531 
学生55班级148 23 145 53 2 9 80 35 31 426 
学生56班级1117 92 44 65 3 98 0 70 67 556 
学生57班级3148 25 63 29 96 34 34 34 92 555 
学生58班级151 22 97 58 80 16 19 91 20 454 
学生59班级2118 1 20 62 26 93 77 66 34 497 
学生60班级3129 19 109 78 33 15 74 67 58 582 
学生61班级3112 68 65 15 79 63 97 72 85 656 
学生62班级3117 14 73 6 6 98 3 81 2 400 
学生63班级187 103 0 2 30 21 43 87 25 398 
学生64班级265 79 49 53 86 33 57 99 83 604 
学生65班级2144 7 122 47 11 76 64 66 71 608 
学生66班级218 140 96 54 10 6 45 41 85 495 
学生67班级230 14 70 20 44 25 77 97 20 397 
学生68班级360 7 147 38 7 53 88 54 92 546 
学生69班级286 115 23 90 52 50 89 79 42 626 
学生70班级3132 25 21 25 44 86 58 61 3 455 
学生71班级3149 102 68 98 96 7 95 25 47 687 
学生72班级228 138 74 30 0 43 95 57 68 533 
学生73班级354 148 81 40 86 23 91 73 95 691 
学生74班级1143 39 76 5 55 90 31 18 95 552 
学生75班级283 95 48 86 61 97 68 84 24 646 
学生76班级1138 1 141 9 50 1 14 5 11 370 
学生77班级325 33 46 25 62 93 41 43 75 443 
学生78班级118 114 93 22 38 73 66 69 79 572 
学生79班级384 10 72 94 30 95 32 41 56 514 
学生80班级2113 39 10 23 28 33 32 7 23 308 
学生81班级383 36 13 13 89 15 39 71 72 431 
学生82班级352 68 39 22 16 9 75 37 95 413 
学生83班级390 0 132 20 36 86 69 39 95 567 
学生84班级161 89 67 10 33 31 99 34 4 428 
学生85班级183 93 105 79 19 30 0 84 7 500 
学生86班级188 143 19 56 9 56 36 89 77 573 
学生87班级170 0 115 66 36 76 0 16 89 468 
学生88班级317 60 49 80 12 99 30 8 1 356 
学生89班级1129 128 48 76 47 46 46 89 1 610 
学生90班级3143 14 86 1 69 55 85 3 43 499 
学生91班级244 127 143 22 7 18 62 33 44 500 
学生92班级137 41 130 71 17 61 68 1 19 445 
学生93班级345 17 22 10 90 1 83 31 11 310 
学生94班级219 40 99 59 77 1 90 9 68 462 
学生95班级1126 19 68 91 53 68 23 87 85 620 
学生96班级1131 126 126 53 13 18 70 85 33 655 
学生97班级153 47 33 87 98 98 62 28 95 601 
学生98班级1107 88 49 91 6 17 66 24 58 506 
学生99班级1118 145 69 4 70 29 43 13 45 536 
学生100班级248 8 115 63 93 53 91 59 93 623 

二、整体的框架

1、最下面的是原始的Table。

2、用左边的table覆盖在上层，命名为tableColumn。

3、用上部的table覆盖在更上层，命名为tableHead。

4、在左上角覆盖固定不动的table，命名为tableFix。

自然在各自的外层都要用div框起来，以便后面的浮动和覆盖等等，所以结构的html如下：

<div id="MyTable_tableLayout"> <div id="MyTable_tableFix"><table id="MyTable_tableFixClone" border="1" cellspacing="0" cellpadding="0"></table> </div><div id="MyTable_tableHead"> <table id="MyTable_tableHeadClone" border="1" cellspacing="0" cellpadding="0"></table> </div> <div id="MyTable_tableColumn"><table id="MyTable_tableColumnClone" border="1" cellspacing="0" cellpadding="0"></table> </div><div id="MyTable_tableData"> <table id="MyTable" border="1" cellspacing="0" cellpadding="0"></table> </div></div>

三、代码实现

整体框架结构出来后，下面要做的就是确定每个区域的高度，宽度，定位就算完成了。

首先确定下调用接口，调用时已经有table了，我们希望很简单的一行js即可高定，就用了一个方法实现。由于使用项目中table线宽全部都是1，所以未考虑其他线宽问题。

function FixTable(TableID, FixColumnNumber, width, height)

第一个参数：table的ID，第二个参数：要锁定的列数目，第三个参数：显示的宽度，第四个参数：显示的高度。

（一）首先创建上面所诉的框架出来：

if ($("#" + TableID + "_tableLayout").length != 0) { $("#" + TableID + "_tableLayout").before($("#" + TableID)); $("#" + TableID + "_tableLayout").empty(); } else { $("#" + TableID).after("<div id='" + TableID +"_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>"); } $('<div id="' + TableID + '_tableFix"></div>' + '<div id="' + TableID + '_tableHead"></div>' + '<div id="' + TableID +'_tableColumn"></div>' + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID +"_tableLayout"); var oldtable = $("#" + TableID); var tableFixClone = oldtable.clone(true); tableFixClone.attr("id", TableID + "_tableFixClone"); $("#" + TableID + "_tableFix").append(tableFixClone);var tableHeadClone = oldtable.clone(true); tableHeadClone.attr("id", TableID + "_tableHeadClone"); $("#" + TableID + "_tableHead").append(tableHeadClone); var tableColumnClone = oldtable.clone(true); tableColumnClone.attr("id", TableID + "_tableColumnClone"); $("#" + TableID +"_tableColumn").append(tableColumnClone); $("#" + TableID + "_tableData").append(oldtable); $("#" + TableID +"_tableLayout table").each(function () { $(this).css("margin", "0"); });

（二）计算tableFix，tableHead的高度：

var HeadHeight = $("#" + TableID + "_tableHead thead").height(); HeadHeight += 2; $("#" + TableID +"_tableHead").css("height", HeadHeight); $("#" + TableID + "_tableFix").css("height", HeadHeight);

（三）计算tableFix，tableColumn的宽度：

var ColumnsWidth = 0; var ColumnsNumber = 0; $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () { ColumnsWidth += $(this).outerWidth(true); ColumnsNumber++; }); ColumnsWidth += 2; if($.browser.msie) { switch ($.browser.version) { case "7.0": if (ColumnsNumber >= 3) ColumnsWidth--; break;case "8.0": if (ColumnsNumber >= 2) ColumnsWidth--; break; } } $("#" + TableID + "_tableColumn").css("width", ColumnsWidth); $("#" + TableID + "_tableFix").css("width", ColumnsWidth);

（四）为tableHead和tableColumn添加联动的滚动条事件：

$("#" + TableID + "_tableData").scroll(function () { $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft()); $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID +"_tableData").scrollTop()); });

（五）为较小的table修正样式：

if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableHead table").width()) { $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableHead table").width()); $("#" + TableID +"_tableData").css("width", $("#" + TableID + "_tableHead table").width() + 17); } if ($("#" + TableID +"_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) { $("#" + TableID +"_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height()); $("#" + TableID +"_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17); }

（六）为整体添加样式，定位：

$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50","background-color": "Silver" }); $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" }); $("#" + TableID +"_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40","background-color": "Silver" }); $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width,"height": height, "position": "relative", "z-index": "35" }); $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableHead").offset($("#" + TableID +"_tableLayout").offset()); $("#" + TableID + "_tableColumn").offset($("#" + TableID +"_tableLayout").offset()); $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

 

四、代码如下

 

完整代码如下:

function FixTable(TableID, FixColumnNumber, width, height) {
    /// <summary>
    ///     锁定表头和列
    ///     <para> sorex.cnblogs.com </para>
    /// </summary>
    /// <param name="TableID" type="String">
    ///     要锁定的Table的ID
    /// </param>
    /// <param name="FixColumnNumber" type="Number">
    ///     要锁定列的个数
    /// </param>
    /// <param name="width" type="Number">
    ///     显示的宽度
    /// </param>
    /// <param name="height" type="Number">
    ///     显示的高度
    /// </param>
    if ($("#" + TableID + "_tableLayout").length != 0) {
        $("#" + TableID + "_tableLayout").before($("#" + TableID));
        $("#" + TableID + "_tableLayout").empty();
    }
    else {
        $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
    }
 
    $('<div id="' + TableID + '_tableFix"></div>'
    + '<div id="' + TableID + '_tableHead"></div>'
    + '<div id="' + TableID + '_tableColumn"></div>'
    + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
 
 
    var oldtable = $("#" + TableID);
 
    var tableFixClone = oldtable.clone(true);
    tableFixClone.attr("id", TableID + "_tableFixClone");
    $("#" + TableID + "_tableFix").append(tableFixClone);
    var tableHeadClone = oldtable.clone(true);
    tableHeadClone.attr("id", TableID + "_tableHeadClone");
    $("#" + TableID + "_tableHead").append(tableHeadClone);
    var tableColumnClone = oldtable.clone(true);
    tableColumnClone.attr("id", TableID + "_tableColumnClone");
    $("#" + TableID + "_tableColumn").append(tableColumnClone);
    $("#" + TableID + "_tableData").append(oldtable);
 
    $("#" + TableID + "_tableLayout table").each(function () {
        $(this).css("margin", "0");
    });
 
 
    var HeadHeight = $("#" + TableID + "_tableHead thead").height();
    HeadHeight += 2;
    $("#" + TableID + "_tableHead").css("height", HeadHeight);
    $("#" + TableID + "_tableFix").css("height", HeadHeight);
 
 
    var ColumnsWidth = 0;
    var ColumnsNumber = 0;
    $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
        ColumnsWidth += $(this).outerWidth(true);
        ColumnsNumber++;
    });
    ColumnsWidth += 2;
    if ($.browser.msie) {
        switch ($.browser.version) {
            case "7.0":
                if (ColumnsNumber >= 3) ColumnsWidth--;
                break;
            case "8.0":
                if (ColumnsNumber >= 2) ColumnsWidth--;
                break;
        }
    }
    $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
    $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
 
 
    $("#" + TableID + "_tableData").scroll(function () {
        $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
        $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
    });
 
    $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
    $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
    $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
    $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
 
    if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
        $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
        $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
    }
    if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
        $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
        $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
    }
 
    $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}


ps:之前的代码有点bug，在高度不够的时候定位会产生错误，在此修正了。

ps2:代码中使用了jquery的msie方法，此方法在1.9.x中删除，需要添加jQuery Migrate Plugin引用，在jQuery官网即可下载到。

jQuery插件冻结行列、固定列固定行，html、table实现 基于jquery的冻结行冻结列插件，可以支持复合表头，对原业务代码侵入较小，非常适合需要实现固定行列对table场景 立即下载

相关推荐

逆向实战：手把手教你用Frida绕过Flutter App的SSL Pinning（附脚本修改指南）

本文详细介绍了如何利用Frida工具绕过Flutter应用的SSL Pinning保护机制，包括静态分析定位关键函数、定制Frida Hook脚本以及流量捕获的完整解决方案。通过实战案例和脚本修改指南，帮助安全研究人员有效应对Flutter应用的安全挑战，特别适用于安卓平台的逆向工程和抓包需求。

weixin_28723171的博客 404

fixtable固定表格头和列

改动了一下，固定列从右往左

weixin_38588074的博客 572

手把手教你用Isograph Reliability Workbench 14.0绘制可靠性方框图（RBD）

本文详细介绍了如何使用Isograph Reliability Workbench 14.0绘制可靠性方框图（RBD），从软件安装、界面设置到基础项目创建和高级功能应用，手把手指导工程师完成系统可靠性分析。通过实际案例演示，帮助用户掌握RBD建模技巧，提升系统可靠性评估效率。

weixin_26765287的博客 623

锁定表头和固定列(Fixed table head and columns)(转载)

前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪念。 支持IE6+，FF3.6+，Opera9+，Chrome9+ 一、实现方式 这里的准备使用4个table实现，具体...

ass2112128的博客 352

Rust 编译工具链配置指南：从 link.exe 缺失到完美解决

本文详细解析了Windows下Rust编译时常见的'link.exe not found'错误，提供了MSVC和MinGW-w64两种工具链的完整配置指南。从Visual Studio组件安装到环境变量设置，再到疑难排查技巧，帮助开发者彻底解决Rust编译工具链配置问题，提升开发效率。

earth的博客 319

别再手动续期SSL证书了！用acme.sh配合阿里云DNS API，实现全自动HTTPS证书管理

本文详细介绍了如何使用acme.sh配合阿里云DNS API实现SSL/TLS证书的全自动管理，彻底解决手动续期带来的风险与不便。通过自动化部署流程，包括环境准备、API集成、多域名证书申请等关键步骤，帮助运维人员构建高效、可靠的HTTPS证书管理体系，显著提升安全性和运维效率。

weixin_29200485的博客 268

锁定表头和固定列(Fixed table head and columns) （转发）

转发：http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html 前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪...

283

【ESP32设备通信】-两个ESP32间UART通信

在本文中，我们将使用 Arduino IDE 的 UART 硬件库在两个 ESP32 板之间执行 UART 或串行通信。 要使用 USB 端口调试和编程 ESP32，需要使用称为通用异步接收器/发送器 (UART) 通信的串行端口。 对于大多数传感器和系统，主要的通信方法被认为是 UART。 为了共享工作负载、信息和执行不同的任务，有时需要在两个 ESP32 开发板之间进行通信。

视觉与物联智能 2994
上一篇： $.browser.msie 为空或不是对象问题的多种解决方法，jquery高版本废弃低版本api，属性不兼容问题
下一篇： javaScript笔记
点赞 0
评论 0
书签 书签 3
voidL123
voidL123
博客等级 码龄9年 6粉丝 26原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值