官场小说排行榜,网络小说排行榜

主頁 > 知識庫 > html中table固定頭部表格tbody可上下左右滑動

html中table固定頭部表格tbody可上下左右滑動

當(dāng)表格頭部固定時，需要分為兩個表格來做：一部分是thead，一部分是tbody，具體實現(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;
}

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

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

標(biāo)簽：廣安山南內(nèi)蒙古吳忠上海保定陜西清遠(yuǎn)

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《html中table固定頭部表格tbody可上下左右滑動》，本文關(guān)鍵詞 html,中,table,固定,頭部,表格,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

濮阳杆衣贸易有限公司

html中table固定頭部表格tbody可上下左右滑動