表格锁定表头，并且表头宽度跟内容宽度对齐

因为业务需要，需要将列表的表头锁死所以在各种百度之后终于找到了解决方案。

就是将表头跟内容分离开，用一个大的DIV包住 然后通过CSS将内容对齐，具体看代码

1：html

<div class="sti-tbl-container" >
                <div class="sti-tbl-header" style="padding-right:17px;">
                    <table class="list_tab" id ="list_table" class="table table-bordered" style="margin-bottom: 0px;border-bottom-style: none;">

                        <tr class="list_tr"><th  onclick="clickorderby('gift_name')" >礼物<span class="jiantougift_name"></span></th  >
                            <th onclick="clickorderby('from_nickname')">赠送者<span class="jiantoufrom_nickname"></span></th>
                            <th  onclick="clickorderby('to_nickname')">接受者<span class="jiantouto_nickname"></span></th>
                            <th  onclick="clickorderby('gift_sum')">数量（个）<span class="jiantougift_sum"></span></th>
                            <th class="tr_reg_time" onclick="clickorderby('total_price')">价值（币）<span class="jiantoutotal_price"></span></th>
                            <th  onclick="clickorderby('room_name')">房间<span class="jiantouroom_name"></span></th>
                            <th onclick="clickorderby('name')">所属团队<span class="jiantouname"></span></th>
                            <th onclick="clickorderby('add_time')">赠送时间<span class="jiantouadd_time"></span></th>
                        </tr>
                        {{--<tr class="list_tr">--}}
                        {{--<th><input type="checkbox"  id="all" /></th>--}}
                        {{--<th class="tr_id" class="jiantouroom_id">昵称</th>--}}
                        {{--<th>在麦时长</th>--}}
                        {{--<th>所在房间</th>--}}
                        {{--<th>所属团队</th>--}}
                        {{--<th>上麦时间</th>--}}
                        {{--<th class="tr_is_recommend">下麦时间<span class="jiantouis_recommend"></span></th>--}}
                        {{--<th class="tr_is_recommend_main">赠送时间<span class="jiantouis_recommend_main"></span></th>--}}
                        {{--</tr>--}}


                    </table>
                </div>
                <div class="sti-tbl-body">
                    <table class="list_tab" id ="list_table1" class="table table-bordered">
                        {{--<tr class="list_tr">--}}
                        {{--<th><input type="checkbox"  id="all" /></th>--}}
                        {{--<th class="tr_id" class="jiantouroom_id">昵称</th>--}}
                        {{--<th>在麦时长</th>--}}
                        {{--<th>所在房间</th>--}}
                        {{--<th>所属团队</th>--}}
                        {{--<th>上麦时间</th>--}}
                        {{--<th class="tr_is_recommend">下麦时间<span class="jiantouis_recommend"></span></th>--}}
                        {{--<th class="tr_is_recommend_main">赠送时间<span class="jiantouis_recommend_main"></span></th>--}}
                        {{--</tr>--}}


                    </table>
                </div>

2css

 

 

/* 表格容器样式，用flex布局可保证table内容能铺满剩余空间 */
.sti-tbl-container {
    /*width:800px;*/
    height : 500px;
    overflow : hidden;
    display : flex;
    flex-direction: column;
    -moz-column-fill: balance;

}
/* 设置表格的布局方式，用于宽度对齐 */
.sti-tbl-body>table, .sti-tbl-header>table {
    table-layout: fixed;

}
/* 设置表格内容容器，用于铺满整个剩余空间 */
.sti-tbl-container .sti-tbl-body {
    /*width:800px;*/
    flex-grow : 1;
    overflow-y : scroll;
}