<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列才能与增加的额外列一起滚动?

最佳答案

使表响应式的结构如下

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

10-10 22:11