Bootstrap網格系統中的表

Question

 <table class="fees-table table-bordered" data-toggle="table"> <thead> <tr> <th> </th> <th> <label>DHL</label> </th> <th> <label>DHL</label> </th> <th> <label>Mallory</label> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> </tr> <tr> <th> </th> <th> <label>BOND</label> </th> <th> <label>CQE/Non</label> </th> <th> <label>Agave</label> </th> <th> <label>Fees</label> </th> <th> </th> <th> </th> <th> </th> <th> </th> </tr> </thead> <tbody> <tr> <td> <label>Entry</label> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td></td> <td> <label>Harbor Maintenance</label> </td> <td></td> <td> <input type="text" /> </td> <td> <label>%</label> </td> <td></td> </tr> <tr> <td> <label>ISF</label> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td></td> <td> <label>Merch. Processing</label> </td> <td></td> <td> <input type="text" /> </td> <td> <label>%</label> </td> <td> <input type="text" /> </td> </tr> <tr> <td> <label>FDA Notice</label> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <label>Express Mail</label> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <label>Disbursement</label> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td></td> <td> <label>Mex Honey USDA</label> </td> <td></td> <td> <input type="text" /> </td> <td> <label>$</label> </td> <td> <input type="text" /> </td> </tr> <tr> <td> <label>Avg 2 Customs Withdrawls</label> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <label></label> </td> <td></td> <td></td> <td></td> <td> <label>Border Whse</label> </td> <td></td> <td> <input type="text" /> </td> <td> <label>$/PLT</label> </td> <td> <input type="text" /> </td> </tr> <tr> <td> <label>Mexican Pre-Validation</label> </td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <label>Mexican Customs</label> </td> <td></td> <td></td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <label>US Customs</label> </td> <td></td> <td></td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <label>Border Drayage</label> </td> <td></td> <td></td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <label>Border Warehouse</label> </td> <td></td> <td></td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <label>Blocking & Bracing</label> </td> <td></td> <td></td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> <label>Total</label> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

我的要求是，我希望2,3,4列應可滾動，因為我想為此添加額外的列。 我想要一個想法怎么做？ 使用表或網格系統n引導程序？ 有什么建議嗎？

表也​​應該響應。 只有那3列才能與添加的額外列一起滾動？

Answer 1

使表響應式的結構如下

<div class="table-responsive">
  <table class="table table-striped table-bordered">
// rest of the code
 </table>
</div>