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;}

實現效果如下:
這里寫圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM