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

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

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

项目demo

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

项目demo

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

<style>
    .table-responsive {
        overflow: auto !important;
    }
    .table-th-css {
        background: #EFEFF4 !important;
        position: relative !important;
        text-align: center;
        top: 0;
    }
    .section-scroll{
        height:417px;
    }
</style>
  

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

<div class="table-responsive section-scroll">
    <table class="table table-bordered">
        <thead class="table-header">
            <tr>
                        <th class="table-th-css">
                            <div>部门</div>
                        </th>
                        <th class="table-th-css">
                            <div>用户名称</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>1月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>2月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>3月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>4月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>5月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>6月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>7月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>8月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>9月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>10月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>11月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>12月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>合计</div>
                        </th>
            </tr>
        </thead>
        <tbody >
            <tr class="text-center" >
                        <td >
                            多毛大叔爱萝莉
                        </td>
                        <td class="table-textWidth">
                            多毛大叔爱萝莉
                        </td>
                        <td>
                            多毛大叔爱萝莉
                        </td>
                        <td>
                           多毛大叔爱萝莉
                        </td>
                        <td>
                            多毛大叔爱萝莉
                        </td>
                        <td>
                           多毛大叔爱萝莉
                        </td>
                        <td>
                            多毛大叔爱萝莉
                        </td>
                        <td>
                            多毛大叔爱萝莉
                        </td>
                        <td>
                           多毛大叔爱萝莉
                        </td>
                        <td>
                            多毛大叔爱萝莉
                        </td>
                        <td>
                           多毛大叔爱萝莉
                        </td>
                        <td>
                           多毛大叔爱萝莉
                        </td>
                        <td>
                            多毛大叔爱萝莉
                        </td>
                        <td>
                            多毛大叔爱萝莉
                        </td>
                        <td>
                            多毛大叔爱萝莉
                        </td>
            </tr>
        </tbody>
    </table>
</div>

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的滚动有回弹所以效果会显得有点卡顿。本人菜鸡不喜勿喷(欢迎回复..)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,844评论 1 92
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,026评论 3 119
  • 作为语文老师,最痛苦的事是什么?不是备课,不是授课,不是公开课,不是批作业,而判作文、作文、作文!为什么呢?因为,...
    胡喜平阅读 311评论 0 0
  • 1. 咪蒙有一篇流传甚广的文章一一《致贱人》,这篇文章里出现的“贱人”都有一个共同的特点,理直气壮地要求别人帮忙,...
    然岁阅读 4,058评论 35 121
  • 价值人生 life198012 股票型基金和混合型基金里面有被动型和主动型。被动型的包括指数基金、策略基金等等,此...
    bonjour1218阅读 272评论 0 2