<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 bootstrap？ 有什么建议吗？
表格也应该是响应式的。只有那 3 列应该可以与额外添加的列一起滚动吗？
最佳答案
要使表响应式，请按如下结构
<div class="table-responsive">
<table class="table table-striped table-bordered">
// rest of the code
</table>
</div>
关于html - Bootstrap 网格系统中的表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43894722/