HTMLtable表头固定(自己做项目使用的几种方法)

2023年6月20日发(作者：)

HTMLtable表头固定（⾃⼰做项⽬使⽤的⼏种⽅法）还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多⽂档。最后总结出⼏个不错的⽅法和插件。⼀、使⽤css + js来实现表头固定使⽤css定位th 根据⽗级滚动条scrolltop的偏移量获取值，在⽤js把偏移量赋值到th的定位top上。就做到了表头固定。（此⽅法需要固定⾼度）项⽬democss样式部分 主要是出现滚动条和定位th还有固定⾼度。

html部分 ⾃⼰做肯定内容超级多 demo我就不复制那么多内容了。

js内容 使⽤jq的on事件，监听滚动根据我⾃⼰项⽬的样式修改了下⾃⼰的样式。⼤家使⽤可⾃⾏调整。var tableCont = $('.section-scroll tr th'); //获取thvar tableCont_child = $('.section-scroll tr th div'); //获取th下边的divvar tableScroll = $('.section-scroll'); //获取滚动条同级的class function scrollHandle() { var scrollTop = Top(); // 当滚动距离⼤于0时设置top及相应的样式 if (scrollTop > 0) { ({ "top": scrollTop + 'px', "marginTop": "-1px", "padding": 0 }); tableCont_({ "borderTop": "1px solid gainsboro", "borderBottom": "1px solid gainsboro", "marginTop": "-1px", "padding": "8px" }) } else { // 当滚动距离⼩于0时设置top及相应的样式 ({ "top": scrollTop + 'px', "marginTop": "0", }); tableCont_({ "border": "none", "marginTop": 0, "marginBottom": 0, }) } }('scroll', scrollHandle);这样第⼀种⽅式的表头固定就完成了。在浏览器上看着基本没瑕疵，但是我⽤mui使⽤这种⽅法，可能是app的滚动有回弹所以效果会显得有点卡顿。本⼈菜鸡不喜勿喷（欢迎回复…）。⼆、使⽤jq插件 （这是去年在公司让做表头固定找的jq插件 由于技术⽔平问题我在angular 中使⽤了jq 反正最后解决了 哈哈）由于是去年简单草率的做了个demo 截了个图 主要使⽤了 这个插件 上图上demo （不喜勿喷，本⼈⼩⽩）⼤概就是这样⼦ 但是这⾥貌似没法上传压缩包 有个demo 那就不传吧 ⼤家可以去jq22查看 这个插件 具体不说了哈。

2023年6月20日发(作者：)

HTMLtable表头固定（⾃⼰做项⽬使⽤的⼏种⽅法）还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多⽂档。最后总结出⼏个不错的⽅法和插件。⼀、使⽤css + js来实现表头固定使⽤css定位th 根据⽗级滚动条scrolltop的偏移量获取值，在⽤js把偏移量赋值到th的定位top上。就做到了表头固定。（此⽅法需要固定⾼度）项⽬democss样式部分 主要是出现滚动条和定位th还有固定⾼度。

html部分 ⾃⼰做肯定内容超级多 demo我就不复制那么多内容了。

js内容 使⽤jq的on事件，监听滚动根据我⾃⼰项⽬的样式修改了下⾃⼰的样式。⼤家使⽤可⾃⾏调整。var tableCont = $('.section-scroll tr th'); //获取thvar tableCont_child = $('.section-scroll tr th div'); //获取th下边的divvar tableScroll = $('.section-scroll'); //获取滚动条同级的class function scrollHandle() { var scrollTop = Top(); // 当滚动距离⼤于0时设置top及相应的样式 if (scrollTop > 0) { ({ "top": scrollTop + 'px', "marginTop": "-1px", "padding": 0 }); tableCont_({ "borderTop": "1px solid gainsboro", "borderBottom": "1px solid gainsboro", "marginTop": "-1px", "padding": "8px" }) } else { // 当滚动距离⼩于0时设置top及相应的样式 ({ "top": scrollTop + 'px', "marginTop": "0", }); tableCont_({ "border": "none", "marginTop": 0, "marginBottom": 0, }) } }('scroll', scrollHandle);这样第⼀种⽅式的表头固定就完成了。在浏览器上看着基本没瑕疵，但是我⽤mui使⽤这种⽅法，可能是app的滚动有回弹所以效果会显得有点卡顿。本⼈菜鸡不喜勿喷（欢迎回复…）。⼆、使⽤jq插件 （这是去年在公司让做表头固定找的jq插件 由于技术⽔平问题我在angular 中使⽤了jq 反正最后解决了 哈哈）由于是去年简单草率的做了个demo 截了个图 主要使⽤了 这个插件 上图上demo （不喜勿喷，本⼈⼩⽩）⼤概就是这样⼦ 但是这⾥貌似没法上传压缩包 有个demo 那就不传吧 ⼤家可以去jq22查看 这个插件 具体不说了哈。