表格滚动方法总结

例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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值