具有水平和垂直滚动条的Bootstrap固定头

Question

我正在使用引导程序上的表进行操作，该表具有固定的标题并且包含水平和垂直滚动条。

我想在底部有1个滚动条来调整列标题的视图，而在右侧有一个滚动条来调整行的视图而不移动列标题。 我如何做到这一点？

#maindiv{
    overflow-y: scroll;
}
#subdiv{
    height:100px;
    overflow-x:scroll;
    width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<div id = "maindiv">
  <table class = "table table-responsive table-condensed table-bordered table-hover" style = "table-layout: fixed;" >
    <tr style = "font-weight: bold;text-align: center;">
        <th width = "20px">&nbsp;</th>
        <th width = "250px">ORDER TYPE</th>
        <th width = "100px">UNIT CODE</th>
        <th width = "200px">ACCOUNT TITLE</th>
        <th width = "200px">PARTICULARS</th>
        <th width = "150px">PLANT</th>
        <th width = "150px">DEPARTMENT</th>
        <th width = "100px">UoM (S)</th>
        <th width = "100px">QTY (S)</th>
        <th width = "100px">UoM (I)</th>
        <th width = "100px">QTY (I)</th>
        <th width = "100px">SIZE</th>
        <th width = "100px">UNIT COST</th>
        <th width = "100px">TOTAL COST</th>
        <th width = "200px">CHARGE TO</th>
    </tr>
    </table>
    
    <div id = "subdiv">
    <table class = "table table-responsive table-condensed table-bordered table-hover" style = "table-layout: fixed;" width = "100%">
    <tr>
        <tr style = "font-weight: bold;text-align: center;">
        <th width = "20px">&nbsp;</th>
        <th width = "250px">ORDER TYPE</th>
        <th width = "100px">UNIT CODE</th>
        <th width = "200px">ACCOUNT TITLE</th>
        <th width = "200px">PARTICULARS</th>
        <th width = "150px">PLANT</th>
        <th width = "150px">DEPARTMENT</th>
        <th width = "100px">UoM (S)</th>
        <th width = "100px">QTY (S)</th>
        <th width = "100px">UoM (I)</th>
        <th width = "100px">QTY (I)</th>
        <th width = "100px">SIZE</th>
        <th width = "100px">UNIT COST</th>
        <th width = "100px">TOTAL COST</th>
        <th width = "200px">CHARGE TO</th>
    </tr>
        <tr>
        <td>1</td>
        <td>NA</td>
        <td>Office Supplies</td>
        <td>Epson Blank Ink</td>
        <td>Office 1</td>
        <td>Operations</td>
        <td>pcs</td>
        <td>1</td>
        <td>NA</td>
        <td>0</td>
        <td>0</td>
        <td></td>
        <td>160</td>
        <td>160</td>
        <td>NA</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Client</td>
        <td>U-0604</td>
        <td>NA</td>
        <td>Power Windown Switch</td>
        <td>NA</td>
        <td>NA</td>
        <td>pcs</td>
        <td>1</td>
        <td>NA</td>
        <td>0</td>
        <td></td>
        <td>1500</td>
        <td>1500</td>
        <td>NA</td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    
    </table>
    </div> <!-- subdiv -->
</div> <!-- maindiv -->