table固定头部，表格tbody可上下左右滑动

最新推荐文章于 2025-07-04 09:29:35 发布

淡水无华

最新推荐文章于 2025-07-04 09:29:35 发布

阅读量1.6w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html

本文链接：https://blog.youkuaiyun.com/gaos2310/article/details/78434798

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在HTML中实现表格的表头固定，tbody部分可上下左右滑动的效果。通过将thead和tbody分开并设置相应CSS样式，可以达到预期的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下：
html代码：

<div class="table_box_big">
<div class="table_box">
    <table>
        <thead>
        <tr>
            <th><div>标题一</div></th>
            <th><div>标题二</div></th>
            <th><div>标题三</div></th>
            <th><div>标题标题标题标题标题标题标题标题标题四</div></th>
            <th><div>标题标题标题标题标题标题标题标题标题五</div></th>
            <th><div>标题标题标题标题标题标题标题标题标题六</div></th>
        </tr>
        </thead>
    </table>
    <div class="table_tbody_box">
        <table>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
        </table>
    </div>
</div>

css样式：

.table_box_big{overflow-x: scroll;overflow-y: hidden;position: relative;height: 350px;}
.table_box{overflow: hidden;position: absolute;}
.table_tbody_box{height: 300px;overflow: scroll;}
table{border: 1px solid #eeeeee;}
table thead tr th{width: 80px;height: 50px;border-right: 1px solid #eeeeee;text-align: center;word-break: keep-all;padding: 2px 10px;background: skyblue;}
table tbody tr td{width: 80px;height: 50px;border-right: 1px solid #eeeeee;text-align: center;border-bottom: 1px solid #eeeeee;word-break: keep-all;padding: 2px 10px;}

实现效果如下：
这里写图片描述