html中table固定頭部表格tbody可上下左右滑動(dòng)

時(shí)間：2023-03-03 15:33:01 | 來(lái)源：建站知識(shí)

時(shí)間：2023-03-03 15:33:01 來(lái)源：建站知識(shí)

這篇文章主要介紹了html中table固定頭部表格tbody可上下左右滑動(dòng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

當(dāng)表格頭部固定時(shí)，需要分為兩個(gè)表格來(lái)做：一部分是thead，一部分是tbody，具體實(shí)現(xiàn)方式如下：

html代碼：

<div class="table_box_big">
<div class="table_box">
    <table>
        <thead>
        <tr>
            <th><div>標(biāo)題一</div></th>
            <th><div>標(biāo)題二</div></th>
            <th><div>標(biāo)題三</div></th>
            <th><div>標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題四</div></th>
            <th><div>標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題五</div></th>
            <th><div>標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題六</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;
}

實(shí)現(xiàn)效果如下：

到此這篇關(guān)于html中table固定頭部表格tbody可上下左右滑動(dòng)的文章就介紹到這了,更多相關(guān)html中table固定頭部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

來(lái)源：腳本之家

鏈接：https://www.jb51.net/web/738039.html