jq实现表格内容超出页面需要滚动时,表头thead固定在顶部

爱前端的小周同学

已于 2022-04-27 11:24:43 修改

阅读量920

点赞数

分类专栏： Jquery 文章标签： jquery

于 2022-04-27 11:21:19 首次发布

本文链接：https://blog.csdn.net/gxh0816/article/details/124446509

版权

当表格内容过多导致滚动时，原始表头可能会被遮挡，影响阅读。本文介绍了一种使用jQuery实现的方法，通过创建隐藏的独立表头，并根据页面滚动距离动态显示，确保表头始终可见。需要调整特定距离和单元格宽度以匹配内容。

摘要由CSDN通过智能技术生成

前言:

当我们一个表格的行数过长时,我们往下滑时,表头也就对应的往上滑了.可能就被盖住了,我们看不到了.但这样就会不方便,我们无法知道对应的列代表什么东西,所以这个时候我们就需要实现让表头不会消失一直能够在顶端显示.

实现思路:

我自己也是找过很多办法有一一尝试过,这个方法是我觉得相对来说最好的.

首先单独写一个表头,让它处于隐藏.然后去判断页面滚动的距离,当表头消失时,让我们单独写的表头显示出来.这样就能实现这个效果了.这个距离需要自己去调试找到合适的.

代码:

html代码:

//隐藏的表头   
<div class="fixed-div hide">
                                        <table width="100%" border="1"
                                            class="am-table am-table-compact am-table-striped tpl-table-black info"
                                            style="border-collapse:collapse;border:1px solid #ddd;">
                                            <thead class="fixed-div">
                                                <tr>
                                                    <th style="border: 1px solid #ddd;" rowspan="2" valign="middle"
                                                        nowrap>
                                                        序号</th>
                                                    <!-- <th rowspan="2" nowrap>区域销售</th>
                                                <th rowspan="2" nowrap>运营负责人</th> -->
                                                    <th class="line hit" colspan="1" nowrap>客户信息</th>
                                                    <th nowrap rowspan="2">支付信息</th>
                                                    <th colspan="3" nowrap>项目信息</th>