因為業務需要，需要將列表的表頭鎖死所以在各種百度之後終於找到了解決方案。

就是將表頭跟內容分離開，用一個大的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;
}