HTML table表头固定（自己做项目使用的几种方法）

还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多文档。最后总结出几个不错的方法和插件。

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

项目demo

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

项目demo

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

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

    

        

            

                        

                            
部门
                        
                        

                            
用户名称
                        
                        

                            
1月
                        
                        

                            
2月
                        
                        

                            
3月
                        
                        

                            
4月
                        
                        

                            
5月
                        
                        

                            
6月
                        
                        

                            
7月
                        
                        

                            
8月
                        
                        

                            
9月
                        
                        

                            
10月
                        
                        

                            
11月
                        
                        

                            
12月
                        
                        

                            
合计
                        
            
        
        

            

                        

                            多毛大叔爱萝莉
                        
                        

                            多毛大叔爱萝莉
                        
                        

                            多毛大叔爱萝莉
                        
                        

                           多毛大叔爱萝莉
                        
                        

                            多毛大叔爱萝莉
                        
                        

                           多毛大叔爱萝莉
                        
                        

                            多毛大叔爱萝莉
                        
                        

                            多毛大叔爱萝莉
                        
                        

                           多毛大叔爱萝莉
                        
                        

                            多毛大叔爱萝莉
                        
                        

                           多毛大叔爱萝莉
                        
                        

                           多毛大叔爱萝莉
                        
                        

                            多毛大叔爱萝莉
                        
                        

                            多毛大叔爱萝莉
                        
                        

                            多毛大叔爱萝莉
                        
            
        
    

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);

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