使 Bootstrap 表可滚动而不影响网格系统答案

【问题标题】：Make Bootstrap table scrollable without effecting the grid system使 Bootstrap 表可滚动而不影响网格系统
【发布时间】：2014-11-16 07:09:41
【问题描述】：

如何在不影响网格系统的情况下使表格可滚动？如何在不干扰 col-xs 标签的情况下使表格可滚动？

 <table class="col-xs-12">  
    <thead>
                            <th class="col-xs-2">A</th>
                            <th class="col-xs-1">B</th>
                            <th class="col-xs-1">c</th>
                            <th class="col-xs-2">d</th>
                            <th class="col-xs-2">e</th>
                            <th class="col-xs-1">f</th>
                            <th class="col-xs-1">g</th>
                            <th class="col-xs-1">h</th>
                            <th class="col-xs-1">i</th>
                          </thead>
                          <tbody>
                              <tr>
                                <td><input type="text" class="form-control""></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                              </tr>
                          </tbody>
                        </table>

【问题讨论】：

标签： css twitter-bootstrap html-table

【解决方案1】：

表格是否需要在所有屏幕尺寸上都可以滚动？

如果您只需要它在小型设备上滚动，您可以使用引导程序的 .table-responsive 类

http://getbootstrap.com/css/#tables-responsive

【讨论】：

当 tbody 超过 3 行时应该可以滚动 :)
@user3782454 啊，我以为你想要水平滚动而不是垂直滚动。对于垂直滚动，请查看此处的答案：stackoverflow.com/questions/21168521/…

【解决方案2】：

您是否尝试过使用类table-responsive 将表格包装在div 中并将col-xs-12 更改为table 或最差的row？我已经有一段时间没有使用 Bootstrap 了，如果我错了，请见谅。

如果您考虑垂直滚动，那么可能是表格容器的固定高度（让它成为div）和overflow: scroll？

【讨论】：