HTML中如何实现table固定头部，tbody随意滑动的效果

这篇文章给大家分享的是HTML中如何实现table固定头部，tbody随意滑动的效果。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

当表格头部固定时，需要分为两个表格来做：一部分是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;
}

实现效果如下：

“HTML中如何实现table固定头部，tbody随意滑动的效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注博信网站，小编每天都会为大家更新不同的知识。