css设置表格某一行固定不动-tutorial css-php.cn

css设置表格某一行固定不动的方法：1、使用css定位th，并根据父级滚动条scrolltop的偏移量获取值，然后用js把偏移量赋值到th的定位top上；2、使用jq插件设置表格某一行固定不动。

css设置表格某一行固定不动

本文操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。

css如何让表格某一行固定不动？

css如何让表格某一行固定不动？下面本篇文章给大家介绍一下使用CSS设置表格第一行（表头）固定不动的方法。

一、使用css + js来实现表头固定

使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度）

推荐：《css视频教程》

项目demo

css样式部分主要是出现滚动条和定位th还有固定高度。

Salin selepas log masuk

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

     部门
   用户名称
   1月
   2月
   3月
   4月
   5月
   6月
   7月
   8月
   9月
   10月
   11月
   12月
   合计
  
 
    西门庆   西门庆   西门庆   西门庆   西门庆   西门庆   西门庆   西门庆   西门庆   西门庆   西门庆   西门庆   西门庆   西门庆   西门庆

部门	用户名称	1月	2月	3月	4月	5月	6月	7月	8月	9月	10月	11月	12月	合计
西门庆	西门庆	西门庆	西门庆	西门庆	西门庆	西门庆	西门庆	西门庆	西门庆	西门庆	西门庆	西门庆	西门庆	西门庆

Salin selepas log masuk

js内容使用jq的on事件，监听滚动根据我自己项目的样式修改了下自己的样式。大家使用可自行调整。

var tableCont = $('.section-scroll tr th'); //获取th var tableCont_child = $('.section-scroll tr th div'); //获取th下边的div var 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);

Salin selepas log masuk

这样第一种方式的表头固定就完成了。在浏览器上看着基本没瑕疵，但是我用mui使用这种方法，可能是app的滚动有回弹所以效果会显得有点卡顿。本人菜鸡不喜勿喷（欢迎回复…）。

二、使用jq插件（这是去年在公司让做表头固定找的jq插件由于技术水平问题我在angular 中使用了jq 反正最后解决了哈哈）

由于是去年简单草率的做了个demo 截了个图主要使用了 jquery.fixedheadertable.min.js 这个插件上图上demo （不喜勿喷，本人小白）

插件地址：http://www.jq22.com/jquery-info10153