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

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

由于是去年简单草率的做了个demo 截了个图 主要使用了 jquery.fixedheadertable.min.js 这个插件 上图上demo (不喜勿喷,本人小白)
草率的demo
项目目录
使用方法
项目目录
项目效果

大概就是这样子 但是这里貌似没法上传压缩包 有个demo 那就不传吧 大家可以去jq22查看jquery.fixedheadertable.min.js 这个插件 具体不说了哈。

  • 14
    点赞
  • 56
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值