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固定头部内容请搜索lingkb以前的文章或继续浏览下面的相关文章,希望大家以后多多支持lingkb!

发表评论

发表评论