当表格头部固定不动时,必须分为2个表格来做:一部分是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: 351080x;
}
.table_box {
 overflow: hidden;
 position: absolute;
}
.table_tbody_box {
 height: 301080x;
 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可上下左右滑动 tbody上下左右滑动 固定头部 table HTML HTML/Xhtml  第1张

到此这篇有关html中table固定不动头部表格tbody可前后左右拖动的文章内容就详细介绍到这了,大量有关html中table固定不动头部內容请搜索之前的文章内容或再次访问下边的类似文章,期待大伙儿之后多多的适用!