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

自定義表格固定表頭，隨著表格內容增加出現滾動條