- 综合排序
- 最热优先
- 最新优先
- 来自专栏开源心路
单行固定表头
"middle"; th.style.align = "center"; th.style.padding = "0 10px 0 10px"; if($(obj1).hasClass('common_table_nbfl')){ if(index document.getElementById("fixTableHeader" + event.data.tIndex).scrollLeft = this.scrollLeft; } } 只能固定单行
82110编辑于 2023-06-28 - 来自专栏开源心路
克隆固定表头（固定行列）
$("#" + TableID + "_tableColumnClone").height($("#" + TableID).height()); } }; 效率低，固定双行或者行列用
1.3K20编辑于 2023-06-28 - 来自专栏啸天"s blog
使用css固定table表头
前言 最近有个需求,渲染一个很复杂的table表格,不能用框架实现,使用原生table数据量一大就看不到表头需要固定表头,本篇文章当备份吧 代码 <html lang="zh-CN" class=""> .table-container { width: 50%; height: 200px; border: solid 1px #cccccc; margin: 10px
2.5K20发布于 2020-12-15 - 来自专栏IT开发技术与工作效率
EasyExcel 筛选和冻结固定表头
我的原回答： https://github.com/alibaba/easyexcel/issues/874
6K30发布于 2020-05-27 - 来自专栏全栈程序员必看
如何锁定表头和表行同时锁定_jquery表头固定列
前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 3 26 293 学生7 班级1 28 25 127 96 43 90 75 13 28 525 学生8 班级3 78 64 20 29 70 92 100 69 30 552 学生9 班级2 65 10 139 19 57 86 57 79 76 588 学生10 班级2 113 142 4 100 41 69 12 45 20 546 学生11 班级3 41 84 42 23 89 88 6 4 21 4、在左上角覆盖固定不动的table，命名为tableFix。 代码如下 完整代码如下: function FixTable(TableID, FixColumnNumber, width, height) { ///
/// 锁定表头和列 3.6K20编辑于 2022-09-20 - 来自专栏OECOM
自适应表头和左侧列固定的表格
但是当表格数据过多时，在同一个屏幕下无法完全展示，出现滚动条后，表头部分就被盖住，很容易不清楚看的当前列所代表的意义。 为了解决上述问题，可以想出一个办法就是当表头部分被滚动到浏览器外面，即不在显示区间中，则表头部分固定不动，表格内容滑动，这样就可以方便的清楚自己看的是哪一列了，同理，当浏览器宽度小于表格宽度时，则隐藏超出部分 ，让左侧一列固定，右侧部分可以滑动，则可以方便的知道自己看的是哪一行。 ").css("top",0); } $(window).resize(function(){ headTopPosition(); }); // 对比头部固定 'click', function() { ctrlScroll(true); }); } var DIS = 10
4.7K10发布于 2020-07-01 - 来自专栏前端之攻略
Vue 实现表格搜索、固定表头与排序 原
return items1 } } }) </script> </body> </html> 如果配合Element UI表格插件实现搜索，排序与固定表头与表格左列
3K30发布于 2019-04-04 - 来自专栏远在上海
C# GridView中固定表头的jQuery实现
言归正传，表格是网页上比较常用的呈现数据的一种形式，表格的样式，排序，行动态背景，表头固定，列固定都是比较常见的需求，其实这点需求主要来自于Excel类（OpenOffice也有类似的）的用户体验。 如果你在百度，必应搜索“gridview固定表头”会发现很多结果，大部分都是过时的方法和插件，这浪费了我很多时间去实验和比较哪种更适合我。 淘汰了那些自己写的javascript片段，还有那些不紧固定表头，还必须固定表高的，我尝试了3个插件： FixedHeaderTable：http://www.fixedheadertable.com StickyTableHeaders：https://github.com/jmosbech/StickyTableHeaders 最终选择了这个：StickyTableHeaders，调用简单，无需复杂配置，表头固定非常好用 美中不足是当数据表长度列太多，表格行数太多，返回顶部时会出现明显的加载表头的过程。
2.6K10发布于 2019-02-26 - 来自专栏前端之攻略
包含合并单元格的固定表头 原
window).resize(function () { duiqi(); }); }) </script> 缺点是每次滚动都是不停的计算scrollTop的值，把他赋给固定头的样式
1.6K20发布于 2019-04-04 - 来自专栏前端之攻略
固定表头和左侧列的表格插件DataTable 原
由于表格比较长客户要求左侧的部分列要固定，以及头部固定，并有搜索排序功能，找了好久终于找到一个比较好的插件，DataTable,网站：https://datatables.net/download/index
5.1K10发布于 2019-04-04 - 来自专栏WebJ2EE
React：Table 那些事（3-2）—— 斑马纹、固定表头
固定表头 ? 1. 斑马纹 - UI 效果 斑马纹 就是指隔行换色 ? 2. 斑马纹 - API 接口 在
组件上扩充 stripe 属性控制斑马纹效果 ? ? 3. 下面实现复杂一些的 固定表头效果 4. 固定表头 - UI 效果 固定表头就是 当表体有竖向滚动条且[竖向]滚动时 表头固定不动的效果 ? 5. 固定表头 - API 接口 固定表头通常是 表格高度控制的附加效果 ? 6. 固定表头 - 注意事项 【第一】 固定表头是动态效果 由 Table 高度、数据量共同作用 ? 固定表头 - 代码实现 【第一】 表头、表体、表尾 的同步横向滚动通过 onScroll 实现 ? 为了保持表头、表体能自然对齐 并且充分利用
的 css 特性 所以 gutter 独立于 header 存在 并利用 BFC 特性固定于右侧 ? ? 效果展示 ?
首列固定展示4.4K10发布于 2019-07-19来自专栏Tuzei的笔记纯css实现纵向滚动固定表头与横向内容滚动
这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动 ? image.png 最基础的思路就是表头和内容是用两个表格来显示（图来自https://zhuanlan.zhihu.com/p/33280304），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了 之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。 sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果 所以最后设置了表头
……
<div class="content-container6.4K00发布于 2020-03-16来自专栏跟牛老师一起学WEBGIS固定表头和第一列表格的实现
概述 在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表格的表头和第一列固定，并且出现双向滚动条。 实现思路 1.区域划分 如下图，将整个表格分为四个区域：1、左上区域需要单独出来，因为此区域不参与滚动；2、上部表头，需要固定在顶部并且参与横向滚动；3、左边表头，需要滚动并且参与竖向滚动；4、表格主区域 ，会有横竖向的滚动，控制顶部和左边的表头。
属性7属性8属性9属性10商品8商品9商品105.8K20发布于 2019-06-14来自专栏独立观察员博客WPF DataGrid 通过自定义表头模拟首行固定
WPF DataGrid 通过自定义表头模拟首行固定 独立观察员 2021 年 9 月 25 日 最近工作中要在 WPF 中做个表格，自然首选就是 DataGrid 控件了。 做好之后，工作地很好，可惜好景不长，同事提醒说数据多的话，出现滚动条，这一行要固定住，不过有个属性可以直接设置。 后来发现，他记错了，属性是有，不过是用来设置前几列固定的（FrozenColumnCount），而关于行固定，则没有提供任何相关功能。 经过搜索解决方案，发现没有能直接方便地使用的，有个国外大佬在问答网站上提供了尾行固定的方案，并且说了一句，首行固定更简单，只需要自定义表头就行了。 那就听他的吧，我们来看看怎么通过自定义表头，来达到模拟首行固定的效果。
3.4K10编辑于 2022-12-06来自专栏全栈程序员必看js怎么让指定方法先后顺序_jquery固定table表头
当时遇见这个问题 是医院手麻系统大批量数据展示，由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们 固定首行数据： 采用函数的方式进行 JQ /** * 功能：固定表头 * 参数 viewid 表格的id * scrollid 滚动条所在容器的id * size 表头的行数（复杂表头可能不止一行） */ function scroll bak.style.backgroundColor = “#cfc”; // 设置div的display属性为block，即显示div（貌似也不是必须，但如果你不希望总是显示拷贝得来的表头 bak.style.top = “0px”; bak.style.width = “100%”; // 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的 FixedTitleRow” style=”width:100%;”>
8.1K20编辑于 2022-09-20来自专栏前端之攻略vue+Element实现固定表头、左侧列、搜索、排序与分页
current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10
6.8K30发布于 2019-04-04来自专栏前端资源table固定表头，tbody滚动条样式设置以及填的几个坑
工作中或许会用到 table 表格固定表头， tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。 ? 比较常用的方法是，将 table 的 thead 和 tbody 拆分成两个表格，用 div 包起来，给 div 设置固定高度和 overflow: auto; 属性（其实只给 tbody 的 table 至于对齐，可以使用 固定宽度，只需要给第一行设置一个宽度，下面的会自动与之对齐。如果表格宽度是 100% ，可以给前几列固定宽度，最后一个不设置，使其宽度自适应。 : 200px; } 注意，这里的表头是 th ，表体是 td ，都需要设置宽度。 .table-box::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; } .table-box::-webkit-scrollbar-button{
17.7K20发布于 2019-11-13来自专栏大前端（横向跨端 & 纵向全栈）Element 中根据屏幕大小动态计算表格高度以实现固定表头
在Element UI的表格组件中，要想固定表头，必须给表格指定一个高度，但是用户的屏幕大小是不一样的，为了能将表格底部的分页区域始终显示在屏幕内，就需要动态计算表格的高度。
3.3K20发布于 2021-02-01来自专栏前端达人动手练一练，手写一个价格对比、固定表头滚动的表格
截屏2020-03-25下午5.02.21.png 大家好，今天我们将一起实践下如何手写固定表头，那么什么是固定表头呢？就类似 Excel 表格有个锁定表头的功能，方便用户查阅数据进行数据项的对比。 虽然有不少相关插件提供了类似的功能，比如 ScrollMagic.js，但是今天的实例，我们将用纯原生的方式进行实现，当滚动条滚动至表格位置，固定表头位置，表格内容查看完后，取消固定表头的功能。 今天我们将通过一个界面十分漂亮功能价格对比的表格，展示固定表头的功能，实例操作展示如视频所示，当滚动条滚动至表格位置，添加表头固定样式，当滚动至表格底部，移除固定表头样式。 HTML结构和CSS完成后，接下来我们编写脚本固定表头。 如果滚动条滚动至第三部分内容区域，我们将移除固定表头的样式stickyClass，添加移除固定表头的样式 sticky2-table。
4.2K31发布于 2020-03-25积木报表冻结功能，表头固定让数据查看更轻松
固定头部：向下滚动，表头始终可见当数据行数较多，需要向下滚动查看时，固定头部功能让表头始终停留在顶部，无论滚动到哪里，都能清楚地知道每一列数据的含义。 适用场景：数据行数较多的报表需要频繁查看列标题的场景多维度数据分析报表配置简单： 只需在积木报表设计器中勾选 "固定头部" 选项，即可实现表头冻结，操作简单，效果立竿见影。2. 固定左侧：向左滚动，关键列始终可见当列数较多，需要向左滚动查看时，固定左侧功能让第一列或前几列关键信息始终停留在左侧，无论滚动到哪里，都能看到关键标识信息。 同时固定头部和左侧：全方位锁定，数据查看更轻松对于数据量大、列数多的复杂报表，可以同时固定头部和左侧，实现 "十字锁定" 效果。这样无论向哪个方向滚动，都能同时看到表头和关键列，数据查看更加直观高效。 无论是固定头部、固定左侧，还是同时固定，都能根据实际需求灵活配置，让表头 "站住不动"，数据查看更轻松。
12210编辑于 2026-03-05腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号