表格滚动方法总结

最新推荐文章于 2023-09-11 17:26:17 发布
最新推荐文章于 2023-09-11 17:26:17 发布
阅读量262 收藏 1
点赞数 1
分类专栏： HTML/CSS 文章标签： 前端 HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenxianhui1995/article/details/81201371
版权

例1: 表头固定

  • html
<div class="wrap">
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身高 (cm)</th>
                <th>体重 (kg)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>德莱厄斯</td>
                <td>31</td>
                <td>男</td>
                <td>180</td>
                <td>80</td>
            </tr>
            <tr>
                <td>02</td>
                <td>安妮</td>
                <td>14</td>
                <td>女</td>
                <td>150</td>
                <td>35</td>
            </tr>
            <tr>
                <td>03</td>
                <td>阿狸</td>
                <td>22</td>
                <td>女</td>
                <td>165</td>
                <td>40</td>
            </tr>
            <tr>
                <td>04</td>
                <td>卢锡安</td>
                <td>28</td>
                <td>男</td>
                <td>172</td>
                <td>55</td>
            </tr>
            <tr>
                <td>05</td>
                <td>艾克</td>
                <td>25</td>
                <td>男</td>
                <td>168</td>
                <td>60</td>
            </tr>
        </tbody>
    </table>
</div>
  • css
table {
    border-collapse: collapse;
    text-align: center;
    tr {
        height: 0.44rem;
        td,th {
            width: 1rem;
        }
    }
    thead {
        tr {
            background: #519FF1;
            font-size: 0.15rem;
            color: #FFFFFF;
            th {
                font-weight: normal;
            }
        }
    }
    tbody {
        height: 1.32rem;
        overflow: auto;
        tr:nth-child(odd) {
            background: #FFFFFF;
        }
        tr:nth-child(even) {
            background: #DCECFC;
        }
    }
}

例2: 首行首列固定

如图所示
上下滚动, 1 2固定; 左右滚动, 1 3固定

方法1

思路: 1 始终固定; 2 3 利用 position: sticky; 粘性布局
优点: 简单, HTML+CSS 即可实现
缺点: 兼容性不太友好

  • html
<div class="wrap">
    <table>
        <thead class="t1">
            <!-- <tr> -->
                <th>序号</th>
            <!-- </tr> -->
        </thead>
        <thead class="t2">
            <!-- <tr> -->
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身高 (cm)</th>
                <th>体重 (kg)</th>
            <!-- </tr> -->
        </thead>
        <tbody class="t3">
            <tr>
                <td>01</td>
            </tr>
            <tr>
                <td>02</td>
            </tr>
            <tr>
                <td>03</td>
            </tr>
            <tr>
                <td>04</td>
            </tr>
            <tr>
                <td>05</td>
            </tr>
            <tr>
                <td>06</td>
            </tr>
            <tr>
                <td>07</td>
            </tr>
        </tbody>
        <tbody class="t4">
            <tr>
                <td>德莱厄斯</td>
                <td>31</td>
                <td>男</td>
                <td>180</td>
                <td>80</td>
            </tr>
            <tr>
                <td>安妮</td>
                <td>14</td>
                <td>女</td>
                <td>150</td>
                <td>35</td>
            </tr>
            <tr>
                <td>阿狸</td>
                <td>22</td>
                <td>女</td>
                <td>165</td>
                <td>40</td>
            </tr>
            <tr>
                <td>卢锡安</td>
                <td>28</td>
                <td>男</td>
                <td>172</td>
                <td>55</td>
            </tr>
            <tr>
                <td>艾克</td>
                <td>25</td>
                <td>男</td>
                <td>168</td>
                <td>60</td>
            </tr>
            <tr>
                <td>努努</td>
                <td>8</td>
                <td>男</td>
                <td>30</td>
                <td>20</td>
            </tr>
            <tr>
                <td>提莫</td>
                <td>11</td>
                <td>女</td>
                <td>40</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
</div>
  • css
    注: 如果是全屏滚动的话, 得先设置最最外层的 div 高度为 100%; 建议整体用 fixed布局, 否则可能出现问题
.wrap {
    width: 100%;
    height: 2.2rem;
    overflow: scroll;
    table {
        position: relative;
        border-collapse: collapse;
        text-align: center;
        td, th {
            height: 0.44rem;
            width: 1rem;
        }
        thead {
            display: block;
            width: 100%;
            th {
                font-weight: normal;
                background: #519FF1;
                font-size: 0.15rem;
                color: #FFFFFF;
            }
        }
        tbody {
            width: 100%;
            tr:nth-child(odd) {
                background: #FFFFFF;
            }
            tr:nth-child(even) {
                background: #DCECFC;
            }
        }
        .t1 {
            position: sticky;
            width: 1rem;
            z-index: 9;
            float: left;
            left: 0;
            top: 0;        
        }
        .t2 {
            position: sticky;
            width: 5rem;
            top: 0;
            margin-left: 1rem;
            z-index: 8;
        }
        .t3 {
            position: sticky;
            width: 1rem;
            left: 0;
            float: left;
            z-index: 8;
        }
        .t4 {
            position: absolute;
            width: 5rem;
            left: 1rem;
            z-index: 7;
        }
    }
}
方法2

思路: 让 3 随着 4 上下移动; 2 随着 4 左右移动
优点: 兼容性好
缺点: 要用到 JS, 不过代码不多 (此例用的是Vue)

  • vue
<template>
    <div>
        <div class="wrap">
            <table>
                <div class="table-left">
                    <thead class="t1">
                        <tr>
                            <th>序号</th>
                        </tr>
                    </thead>
                    <tbody class="t3">
                        <tr>
                            <td>01</td>
                        </tr>
                        <tr>
                            <td>02</td>
                        </tr>
                        <tr>
                            <td>03</td>
                        </tr>
                        <tr>
                            <td>04</td>
                        </tr>
                        <tr>
                            <td>05</td>
                        </tr>
                        <tr>
                            <td>06</td>
                        </tr>
                        <tr>
                            <td>07</td>
                        </tr>
                    </tbody>
                </div>
                <div class="table-right">
                    <thead class="t2">
                        <tr>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>身高 (cm)</th>
                            <th>体重 (kg)</th>
                        </tr>
                    </thead>
                    <tbody class="t4">
                        <tr>
                            <td>德莱厄斯</td>
                            <td>31</td>
                            <td>男</td>
                            <td>180</td>
                            <td>80</td>
                        </tr>
                        <tr>
                            <td>安妮</td>
                            <td>14</td>
                            <td>女</td>
                            <td>150</td>
                            <td>35</td>
                        </tr>
                        <tr>
                            <td>阿狸</td>
                            <td>22</td>
                            <td>女</td>
                            <td>165</td>
                            <td>40</td>
                        </tr>
                        <tr>
                            <td>卢锡安</td>
                            <td>28</td>
                            <td>男</td>
                            <td>172</td>
                            <td>55</td>
                        </tr>
                        <tr>
                            <td>艾克</td>
                            <td>25</td>
                            <td>男</td>
                            <td>168</td>
                            <td>60</td>
                        </tr>
                        <tr>
                            <td>努努</td>
                            <td>8</td>
                            <td>男</td>
                            <td>30</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>提莫</td>
                            <td>11</td>
                            <td>女</td>
                            <td>40</td>
                            <td>20</td>
                        </tr>
                    </tbody>
                </div>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            // 监听滚动事件
            tableScroll() {
                let _t4 = document.getElementsByClassName("t4")[0];
                _t4.onscroll = function() {
                    let _t4_top = this.scrollTop;
                    // let _t4_teft = this.scrollLeft;
                    document.getElementsByClassName("t3")[0].scrollTop = _t4_top;
                    // document.getElementsByClassName("t2")[0].scrollLeft = _t4_teft;
                }
            }
        },
        mounted() {
            window.addEventListener('scroll', this.tableScroll, true);
        },
        destroyed() {
            window.removeEventListener('scroll', this.tableScroll);
        }
    }
</script>

<style scoped lang="less">
    .wrap {
        table {
            width: 100%;
            height: 2.2rem;
            display: block;
            overflow: hidden;
            text-align: center;
            border-collapse: collapse;
            th, td {
                width: 1rem;
                height: 0.44rem;
            }
            thead {
                th {
                    font-weight: normal;
                    background: #519FF1;
                    font-size: 0.15rem;
                    color: #FFFFFF;
                }
            }
            tbody {
                tr:nth-child(odd) {
                    background: #FFFFFF;
                }
                tr:nth-child(even) {
                    background: #DCECFC;
                }
            }
            .table-left {
                width: 25%;
                float: left;
            }
            .table-right {
                width: 75%;
                float: left;
                overflow: auto;
            }
        }
        .t1 {
            display: block;
            width: 1rem;
        }
        .t2 {
            display: block;
            width: 5rem;
        }
        .t3 {
            display: block;
            width: 1rem;
            height: 1.76rem;
            overflow: hidden;
        }
        .t4 {
            width: 5rem;
            height: 1.76rem;
            display: block;
            overflow: auto;
        }
    }
</style>
小技巧:
  • 表格自动折行处理
td {
    white-space: nowrap;
}
/* <td nowrap="nowrap"></td> */
小贤笔记
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现表格无缝滚动
weixin_44389116的博客
07-04 628
【代码】js实现表格无缝滚动。
js表格无缝滚动效果
09-05
使用js实现对table表格的向上（可自定义方向）无缝滚动效果。
JS实现表格无缝滚动（无限滚动效果）
qq_30907143的博客
09-11 3725
JS实现表格无缝滚动（无限滚动效果）
js实现列表数据的滚动展示
admin_body的博客
02-20 2087
js实现列表数据的滚动展示
js实现表格自动滚动
未来可期的博客
03-26 548
js实现表自动滚动 有需要参考的，css部分就自己写吧，主要是一定要将行，也就是我写的类xn-table-content（我只写了两个行，需要测试多写几行），设置成固定高度，切记切记切记（被坑过）！ 还有out不需要设置高度。 <div class="xn-table-body" id="scroll-box"> <div class="out"> <div class="xn-table-content" value="2"> <div style="
jsp中为表格添加水平滚动条的方法
10-21
总结，要在JSP中为表格添加水平滚动条，需要结合HTML、CSS和可能的JavaScript，尤其是当涉及到Bootstrap框架时，要处理好响应式布局和表格内容的换行问题。通过设置适当的CSS样式和JavaScript操作，可以实现所需的...
jQuery头部固定表格滚动条代码
06-24
总结起来，"jQuery头部固定表格滚动条代码"是一种增强网页表格用户体验的技术，它利用jQuery库实现了表格头部的固定和滚动条的平滑效果。通过合理的HTML结构、CSS样式和JavaScript代码，我们可以创建出一个既美观又...
vue element-ui table表格滚动加载方法
08-27
Vue Element-UI 表格滚动加载方法 在本文中，我们将探讨使用 Vue 和 Element-UI 实现表格滚动加载的方法。本方法可以帮助开发者实现表格的无限滚动加载，提高用户体验。 一、添加全局注册事件 在实现表格滚动加载...
jquery给表格加滚动条
03-23
总结，通过结合jQuery和适当的CSS，我们可以轻松地为HTML表格添加滚动条，提高用户在浏览大量数据时的体验。同时，通过不断学习和实践，可以进一步优化和扩展这个功能，满足更多复杂的网页设计需求。
Vue 无限滚动加载指令实现方法
12-04
总结来说，Vue的无限滚动加载指令实现主要包含以下几个关键点： - 检测滚动位置，判断是否接近页面底部。 - 绑定滚动事件，并在适当的时候触发处理函数。 - 使用指令系统，将无限滚动逻辑与视图绑定。 - 优化性能，...
js+实现+滚动的表格
08-17
js+实现+滚动的表格,可以使页面上的表格滚动
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
js 实现 滚动的表格
03-31
js 实现 滚动的表格! 值得下载看看!资源免费,大家分享!!
js实现表格自动滚动效果（鼠标悬浮在表格上 暂停滚动，鼠标移开继续滚动）
qq_44162778的博客
08-08 2331
js实现表格自动滚动效果（鼠标悬浮在表格上 暂停滚动，鼠标移开继续滚动）
js实现表格按行滚动
weixin_55510188的博客
09-02 2845
3、滚动控制：为了实现按行滚动，需要拿到div表格的每一行的高度，然后定时、逐行执行滚动（即对tbody滚动高度值定时进行累加，每次累加表格行的高度，然后tbody的style属性的top取滚动高度值的负值）。1、表格模仿table的结构，使用div元素构建，其中在tbody外包了一层div(tbody-container)，以便对超出tbody-container的内容进行隐藏。最近又有同样的需求，不过是vue项目，所以又做了一个基于 js实现的表格按行滚动，原理相同。优化了表格内容见底后即滚回顶部。
js控制轮播表格
m0_69564658的博客
02-28 650
js控制表格轮播
用js实现table内容从下到上连续滚动
petrel_921的博客
04-11 1194
用js实现table内容从下到上连续滚动 网上有很多用ul实现新闻列表滚动的例子，但是很少有直接用table实现列表内容滚动的例子，而Marquee标签滚动的效果不是很好，于是就自己写了一个，提供给攻城师朋友们参考 实现思路：由于table包含标题和内容，实际上理想的效果是标题不动，内容滚动，于是把标题和内容拆分出来放在两个table中 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> &lt
js实现表格自动滚动，鼠标放上去后停止滚动且可手动滚动
m0_50441807的博客
05-25 5115
scrollTop可以控制滚动的距离，可以设置一个永久定时器setInterval，每次执行定时器让scrollTop++，即可达到滚动的效果； 下面先理解js的几个属性：scrollHeight，offsetHeight，scrollTop，clientHeight
表头固定,内容可滚动表格的3种实现方法
唐策的博客
11-03 5846
一、表格总宽度自动，每列宽度设置统一用设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<div>包裹并设置该 <div> 的高度固定，高度溢出可滚动即可。两个表格的列宽用相同的<colgroup>固定列宽值，需要注意的是滚动条会占用一定的宽度，一般是：17px，所以在表头需要特别处理一下，不然表格就不能对齐了。大家看代码，最简单的办法是表头单独空一列和下面的表格滚动条对齐
vue element表格表头固定 内容上下滚动
最新发布
10-01
要在Vue Element表格中实现固定表头和内容上下滚动，可以利用Element UI提供的表格组件的特性和样式进行操作。 首先，需要在表格组件外部包裹一个具有固定高度的容器，并设置其样式为`overflow: auto;`，这样就可以实现内容的上下滚动。 然后，在表格组件中，设置`height`属性为需要固定的高度，并将`max-height`属性设为`none`，这样表格内容就可以根据容器的高度自动调整，并实现垂直滚动。 接下来，为表格头部的`el-table-column`组件设置`fixed`属性为`true`，这样表头就会固定在容器的顶部。 此外，可以对滚动容器的样式进行个性化设置，例如添加边框、背景颜色等，以满足具体项目的需求。 最后，在使用Element UI的表格组件时，还需要根据实际数据的情况进行横向或纵向的滚动设置，以确保表格可以正常显示和滚动。 总结来说，实现Vue Element表格表头固定和内容上下滚动的方法是，在表格组件外部包裹一个固定高度的容器，并设置容器的样式为`overflow: auto;`，在表格组件中设置固定高度和表头`fixed`属性，最后根据需要对滚动容器的样式进行个性化设置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值