自定义表格固定表头，随着表格内容增加出现滚动条

Posted 2020-10-02 零碎沉默

1、首先要固定表头就必须是两个表格组合在一起

2、用一个div把两个表格包在一起，并且设置宽度，在让它可以横向滚动，overflow-x: auto

3、在设置里面两个table的宽度为一样，在设置内容表格overflow-x:hidden;overflow-y:auto

 <!--表格表头固定--html部分>
    <div class="wrap_table">
                <div class="table_head">
                    <table class="table table-bordered" id="table_commList_title"
                        name="commList" border="1">
                               <tr>
                                    <th style="">商品货号</th>
                                    <th style="">商品名称</th>
                                    <th style="">规格型号</th>
                                    <th style="">批号</th>
                                    <th style="">有效期</th>
                                    <th style="">补货量</th>
                                    <th>删除</th>
                                </tr>
                        </table>
                </div>
                <div class="table_body">
                    <table class="table table-bordered" id="table_commList"
                        name="commList" border="1" >
                                 <tr style="">
                                    <td style="">商品货号</td>
                                    <td style="">商品名称</td>
                                    <td style="">规格型号</td>
                                    <td style="">批号</td>
                                    <td style="">有效期</td>
                                    <td style="">补货量</th>
                                    <td>删除</th>
                                </tr> 
                                <tr style="">
                                    <td style="">商品货号</td>
                                    <td style="">商品名称</td>
                                    <td style="">规格型号</td>
                                    <td style="">批号</td>
                                    <td style="">有效期</td>
                                    <td style="">补货量</th>
                                    <td>删除</th>
                                </tr>    
                                <tr style="">
                                    <td style="">商品货号</td>
                                    <td style="">商品名称</td>
                                    <td style="">规格型号</td>
                                    <td style="">批号</td>
                                    <td style="">有效期</td>
                                    <td style="">补货量</th>
                                    <td>删除</th>
                                </tr>    
                                <tr style="">
                                    <td style="">商品货号</td>
                                    <td style="">商品名称</td>
                                    <td style="">规格型号</td>
                                    <td style="">批号</td>
                                    <td style="">有效期</td>
                                    <td style="">补货量</th>
                                    <td>删除</th>
                                </tr>    
                                <tr style="">
                                    <td style="">商品货号</td>
                                    <td style="">商品名称</td>
                                    <td style="">规格型号</td>
                                    <td style="">批号</td>
                                    <td style="">有效期</td>
                                    <td style="">补货量</th>
                                    <td>删除</th>
                                </tr>       
                                <tr style="">
                                    <td style="">商品货号</td>
                                    <td style="">商品名称</td>
                                    <td style="">规格型号</td>
                                    <td style="">批号</td>
                                    <td style="">有效期</td>
                                    <td style="">补货量</th>
                                    <td>删除</th>
                                </tr>    
                                <tr style="">
                                    <td style="">商品货号</td>
                                    <td style="">商品名称</td>
                                    <td style="">规格型号</td>
                                    <td style="">批号</td>
                                    <td style="">有效期</td>
                                    <td style="">补货量</th>
                                    <td>删除</th>
                                </tr>    
                                <tr style="">
                                    <td style="">商品货号</td>
                                    <td style="">商品名称</td>
                                    <td style="">规格型号</td>
                                    <td style="">批号</td>
                                    <td style="">有效期</td>
                                    <td style="">补货量</th>
                                    <td>删除</th>
                                </tr>    
                                <tr style="">
                                    <td style="">商品货号</td>
                                    <td style="">商品名称</td>
                                    <td style="">规格型号</td>
                                    <td style="">批号</td>
                                    <td style="">有效期</td>
                                    <td style="">补货量</th>
                                    <td>删除</th>
                                </tr>    

                    </table>
                </div>
            </div>

  /*固定表头出现滚动条*CSS部分/
    .table {
    margin-bottom: 0 !important;
}

.wrap_table {
    overflow-x: scroll;
    width:600px;
}

.table_body td, .table_head th {
    width: 150px !important;
    text-align: center;
}
.table_head .table {
    width: 800px;
}

.table_body {
    height: 200px;
    width: 800px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.table_body .table {
    width: 800px;
}