Bootstrap网格系统中的表

Question

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的要求是，我希望2,3,4列应该可滚动，因为我想添加额外的列。我想知道怎么做？使用表格或网格系统n bootstrap？ 有什么建议吗？

表也应该响应。只有那3列应该可以滚动添加额外的列吗？

Answer 1

使表格响应生成如下结构

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