css设置表格某一行固定不动的方法：1、使用css定位th，并根据父级滚动条scrolltop的偏移量获取值，然后用js把偏移量赋值到th的定位top上；2、使用jq插件设置表格某一行固定不动。
本文操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。
css如何让表格某一行固定不动？
css如何让表格某一行固定不动？下面本篇文章给大家介绍一下使用CSS设置表格第一行（表头）固定不动的方法。
一、使用css + js来实现表头固定
立即学习“前端免费学习笔记（深入）”；
使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度）
推荐：《css视频教程》
项目demo
css样式部分 主要是出现滚动条和定位th还有固定高度。
.table-responsive { overflow: auto !important;}.table-th-css { background: #EFEFF4 !important; position: relative !important; text-align: center; top: 0;}.section-scroll{height:417px;}
登录后复制
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 = tableScroll.scrollTop(); // 当滚动距离大于0时设置top及相应的样式 if (scrollTop > 0) { tableCont.css({ "top": scrollTop + 'px', "marginTop": "-1px", "padding": 0 }); tableCont_child.css({ "borderTop": "1px solid gainsboro", "borderBottom": "1px solid gainsboro", "marginTop": "-1px", "padding": "8px" }) } else { // 当滚动距离小于0时设置top及相应的样式 tableCont.css({ "top": scrollTop + 'px', "marginTop": "0", }); tableCont_child.css({ "border": "none", "marginTop": 0, "marginBottom": 0, }) } }tableScroll.on('scroll', scrollHandle);
登录后复制
这样第一种方式的表头固定就完成了。在浏览器上看着基本没瑕疵，但是我用mui使用这种方法，可能是app的滚动有回弹所以效果会显得有点卡顿。本人菜鸡不喜勿喷（欢迎回复…）。
二、使用jq插件 （这是去年在公司让做表头固定找的jq插件 由于技术水平问题我在angular 中使用了jq 反正最后解决了 哈哈）
由于是去年简单草率的做了个demo 截了个图 主要使用了 jquery.fixedheadertable.min.js 这个插件 上图上demo （不喜勿喷，本人小白）
插件地址：http://www.jq22.com/jquery-info10153
以上就是css设置表格某一行固定不动的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2880415.html
