Bootstrap/CSS中的水平滚动表格

Question

我如何使容器内的表格不随容器宽度变化而保留自身的宽度？我的表格非常宽，想让它适应 col-md-9 容器展示，但由于容器宽度限制导致表格显示效果不佳。我已经尝试对表格使用 min-width 属性，但是随着添加更多列，表格又会被压缩。有没有办法让表格宽度自适应，而不跟随父容器？

<div class="col-md-9" style="overflow-x: auto">
    <table class="table table-bordered" style="width:auto">
    <tbody>
        <tr>
          .... contents
        </tr>
    <tbody>
    </table>
</div>

- Randal Cunanan

---

如果您希望表格的宽度超出容器，那么使用col-md-10、col-md-11或col-md-12来获得额外的宽度不是更简单吗？还是您希望在容器内滚动显示表格？ - Trevor

我希望它能够水平滚动，因为我想在它旁边放置一个侧边栏。此外，我计划动态添加列，所以不能设定固定宽度。 - Randal Cunanan

Answer 1

如果您使用的是Bootstrap 3，则以下是一种可能性：

实时预览：http://fiddle.jshell.net/panchroma/vPH8N/10/show/

编辑视图：http://jsfiddle.net/panchroma/vPH8N/

我正在使用来自http://getbootstrap.com/css/#tables-responsive的响应表格代码。

即：

<div class="table-responsive">
<table class="table">
...
</table>
</div>

- David Taiaroa

---

当你的超宽表格位于一个960像素的div中时怎么办？这样我就看不到水平滚动条了！ :/ - J86

@Ciwan，关于水平滚动条...我认为我的建议并不一定是所有情况下最好的解决方案。它是使用内置的Bootstrap样式的选项，这很好。我见过的其他可折叠表格的解决方案是http://themergency.com/footable/，http://zurb.com/playground/responsive-tables和http://css-tricks.com/responsive-data-table-roundup/。 - David Taiaroa

除非我手动缩小浏览器窗口的宽度，否则当你有一个拥有30列的表格时它就无法正常工作。（不要问为什么表格这么大，答案是“客户需要”）。 - Santhos

是的，我想我知道你的意思@Santhos。引用BS文档http://getbootstrap.com/css/#tables，“当在大于768像素宽度的任何设备上查看时，您将不会看到这些表格中的任何差异。”如果您想要开始一个JS小提琴，也许我可以为您尝试一下。 - David Taiaroa

谢谢，但没有必要。这个问题对我来说相当简单，我只需要像响应式表格一样将表格放在一个 div 中，并设置 overflow 为 scroll 即可。 - Santhos

Answer 2

@Ciwan。你是对的。表格宽度已经占满整个页面（太宽了）。这不是一个好的解决方案。最好的做法是这样：

css:

.scrollme {
    overflow-x: auto;
}

HTML：

<div class="scrollme">                        
  <table class="table table-responsive"> ...
  </table>
</div>

编辑: 将滚动方向从纵向改为横向

- Sonobor

---

我认为你的意思是使用 overflow-x 而不是 overflow-y。 - Mohammed Shareef C

Answer 3

您还可以检查Bootstrap数据表插件，以解决以上问题。

它将具有大型列表可滚动功能和许多其他选项。

$(document).ready(function() {
    $('#example').dataTable( {
        "scrollX": true
    } );
} );

想了解更多信息和示例，请查看此链接

- Mahesh Jadhav

---

哇！谢谢你链接 DataTables。对我来说，这是一个非常棒的库。希望早点知道它就好了。脑子炸了，哈哈！ - David Avellan