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可上下左右滑动的文章就介绍到这了,更多相关html中table固定头部内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！