表格滾動方法總結

例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;
            border-right: 0.01rem solid rgba(81, 159, 241, 0.2);
        }
        th {
            border-right: 0.01rem solid rgba(160, 216, 226, 0.5);
        }
    }
    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 左右移動
優點: 兼容性好
缺點: 內容折行會出現問題

  • 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];
                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>

方法3 ★★★★★

Element UI 受到的啟發

思路: 兩層 div 嵌套
優點: 兼容性好, 并且數據折行后高度靈活改變
缺點: 暫無

<template>
    <div class="table">
        <div class="table-header">
            <table>
                <thead>
                    <tr>
                        <th>
                            <div class="cell">日期</div>
                        </th>
                        <th>
                            <div class="cell">姓名</div>
                        </th>
                        <th>
                            <div class="cell">省份</div>
                        </th>
                        <th>
                            <div class="cell">市區</div>
                        </th>
                        <th>
                            <div class="cell">地址</div>
                        </th>
                        <th>
                            <div class="cell">郵編</div>
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="table-body">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <div class="cell">1111</div>
                        </td>
                        <td>
                            <div class="cell">2222</div>
                        </td>
                        <td>
                            <div class="cell">3333</div>
                        </td>
                        <td>
                            <div class="cell">4444</div>
                        </td>
                        <td>
                            <div class="cell">5555</div>
                        </td>
                        <td>
                            <div class="cell">6666</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="cell">1111</div>
                        </td>
                        <td>
                            <div class="cell">2222</div>
                        </td>
                        <td>
                            <div class="cell">3333</div>
                        </td>
                        <td>
                            <div class="cell">4444</div>
                        </td>
                        <td>
                            <div class="cell">5555</div>
                        </td>
                        <td>
                            <div class="cell">6666</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="cell">1111</div>
                        </td>
                        <td>
                            <div class="cell">2222</div>
                        </td>
                        <td>
                            <div class="cell">3333</div>
                        </td>
                        <td>
                            <div class="cell">4444</div>
                        </td>
                        <td>
                            <div class="cell">5555</div>
                        </td>
                        <td>
                            <div class="cell">6666</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="cell">1111</div>
                        </td>
                        <td>
                            <div class="cell">2222</div>
                        </td>
                        <td>
                            <div class="cell">3333</div>
                        </td>
                        <td>
                            <div class="cell">4444</div>
                        </td>
                        <td>
                            <div class="cell">5555</div>
                        </td>
                        <td>
                            <div class="cell">6666</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="cell">1111</div>
                        </td>
                        <td>
                            <div class="cell">2222</div>
                        </td>
                        <td>
                            <div class="cell">3333</div>
                        </td>
                        <td>
                            <div class="cell">4444</div>
                        </td>
                        <td>
                            <div class="cell">5555</div>
                        </td>
                        <td>
                            <div class="cell">6666</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="cell">1111</div>
                        </td>
                        <td>
                            <div class="cell">2222</div>
                        </td>
                        <td>
                            <div class="cell">3333</div>
                        </td>
                        <td>
                            <div class="cell">4444</div>
                        </td>
                        <td>
                            <div class="cell">5555</div>
                        </td>
                        <td>
                            <div class="cell">6666</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="cell">1111</div>
                        </td>
                        <td>
                            <div class="cell">2222</div>
                        </td>
                        <td>
                            <div class="cell">3333</div>
                        </td>
                        <td>
                            <div class="cell">4444</div>
                        </td>
                        <td>
                            <div class="cell">5555</div>
                        </td>
                        <td>
                            <div class="cell">6666</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table-fixed">
            <div class="table-fixed-header">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <div class="cell">日期</div>
                            </th>
                            <th>
                                <div class="cell">姓名</div>
                            </th>
                            <th>
                                <div class="cell">省份</div>
                            </th>
                            <th>
                                <div class="cell">市區</div>
                            </th>
                            <th>
                                <div class="cell">地址</div>
                            </th>
                            <th>
                                <div class="cell">郵編</div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="table-fixed-body">
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <div class="cell">1111</div>
                            </td>
                            <td>
                                <div class="cell">2222</div>
                            </td>
                            <td>
                                <div class="cell">3333</div>
                            </td>
                            <td>
                                <div class="cell">4444</div>
                            </td>
                            <td>
                                <div class="cell">5555</div>
                            </td>
                            <td>
                                <div class="cell">6666</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cell">1111</div>
                            </td>
                            <td>
                                <div class="cell">2222</div>
                            </td>
                            <td>
                                <div class="cell">3333</div>
                            </td>
                            <td>
                                <div class="cell">4444</div>
                            </td>
                            <td>
                                <div class="cell">5555</div>
                            </td>
                            <td>
                                <div class="cell">6666</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cell">1111</div>
                            </td>
                            <td>
                                <div class="cell">2222</div>
                            </td>
                            <td>
                                <div class="cell">3333</div>
                            </td>
                            <td>
                                <div class="cell">4444</div>
                            </td>
                            <td>
                                <div class="cell">5555</div>
                            </td>
                            <td>
                                <div class="cell">6666</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cell">1111</div>
                            </td>
                            <td>
                                <div class="cell">2222</div>
                            </td>
                            <td>
                                <div class="cell">3333</div>
                            </td>
                            <td>
                                <div class="cell">4444</div>
                            </td>
                            <td>
                                <div class="cell">5555</div>
                            </td>
                            <td>
                                <div class="cell">6666</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cell">1111</div>
                            </td>
                            <td>
                                <div class="cell">2222</div>
                            </td>
                            <td>
                                <div class="cell">3333</div>
                            </td>
                            <td>
                                <div class="cell">4444</div>
                            </td>
                            <td>
                                <div class="cell">5555</div>
                            </td>
                            <td>
                                <div class="cell">6666</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cell">1111</div>
                            </td>
                            <td>
                                <div class="cell">2222</div>
                            </td>
                            <td>
                                <div class="cell">3333</div>
                            </td>
                            <td>
                                <div class="cell">4444</div>
                            </td>
                            <td>
                                <div class="cell">5555</div>
                            </td>
                            <td>
                                <div class="cell">6666</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cell">1111</div>
                            </td>
                            <td>
                                <div class="cell">2222</div>
                            </td>
                            <td>
                                <div class="cell">3333</div>
                            </td>
                            <td>
                                <div class="cell">4444</div>
                            </td>
                            <td>
                                <div class="cell">5555</div>
                            </td>
                            <td>
                                <div class="cell">6666</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cell">1111</div>
                            </td>
                            <td>
                                <div class="cell">2222</div>
                            </td>
                            <td>
                                <div class="cell">3333</div>
                            </td>
                            <td>
                                <div class="cell">4444</div>
                            </td>
                            <td>
                                <div class="cell">5555</div>
                            </td>
                            <td>
                                <div class="cell">6666</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            window.addEventListener('scroll', this.tableScroll, true);
        },
        beforeDestroy() {
            window.removeEventListener('scroll', this.tableScroll);
        },
        methods: {
            tableScroll() {
                let _t2 = document.getElementsByClassName('table-header')[0];
                let _t3 = document.getElementsByClassName('table-fixed-body')[0];
                let _t4 = document.getElementsByClassName('table-body')[0];

                _t2.scrollLeft = _t4.scrollLeft;
                _t3.scrollTop = _t4.scrollTop;
            }
        }
    }
</script>

<style scoped lang="less">
    table {
        width: 6rem;
        text-align: center;
        table-layout: fixed; /* 為表設置表格布局算法 */
        border-collapse: collapse; /* 合并邊框 */
        flex: 1; /* 讓所有彈性盒模型對象的子元素都有相同的長度,且忽略它們內部的內容 */
        user-select: none; /* 文本不可選 */
        font-size: 0.15rem;
        tr {
            &:nth-child(odd) {
                background: #FFFFFF;
            }
            &:nth-child(even) {
                background: #DCECFC;
            }
            th, td {
                // padding: 0.15rem 0;
                height: 0.44rem;
                overflow: hidden;
                white-space: nowrap; /* 文本不換行 */
            }
            th {
                background: #519FF1;
                color: #FFFFFF;
                border-right: 0.01rem solid rgba(81, 159, 241, 0.2);
                .cell {
                    position: relative;
                    word-wrap: normal; /* 只在允許的斷字點換行 */
                    text-overflow: ellipsis; /* 超出部分省略號 */
                    vertical-align: middle;
                    width: 100%;
                    box-sizing: border-box;
                    display: inline-block;
                }
            }
            td {
                border-right: 0.01rem solid rgba(81, 159, 241, 0.2);
                .cell {
                    box-sizing: border-box;
                    white-space: normal; /* 文本不換行 */
                    word-break: break-all;
                }
            }
        }
    }

    .table {
        position: relative;
        width: 100%;
        height: 2.2rem;
        overflow: hidden;
        box-sizing: border-box;
        max-width: 100%;
        color: #606266;
        .table-header {
            width: 100%;
            overflow: hidden;
        }
        .table-body {
            position: relative;
            width: 100%;
            height: 1.76rem;
            overflow: auto;
        }
        .table-fixed {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            width: 1.01rem;
            height: 2.2rem;
            .table-fixed-header {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 3;
            }
            .table-fixed-body {
                position: absolute;
                left: 0;
                top: 0.44rem;
                width: 100%;
                height: 1.76rem;
                overflow: hidden;
            }
        }
    }
</style>

小技巧:

  • 表格自動折行處理
td {
    white-space: nowrap;
}
/* <td nowrap="nowrap"></td> */
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容