Bootstrap/CSS 中的水平滚动表答案

【问题标题】：Horizontal Scroll Table in Bootstrap/CSSBootstrap/CSS 中的水平滚动表
【发布时间】：2013-11-21 03:39:57
【问题描述】：

我怎样才能使容器内具有自己宽度的表格不跟随容器的宽度，而是在表格不在容器内时保留表格的宽度。我有一张非常宽的桌子，我想放在 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>

【问题讨论】：

如果您希望表格的宽度超出容器的范围，那么为额外的宽度制作col-md-10 或col-md-11 或col-md-12 会更容易吗？还是您在寻找它在容器内滚动？
我希望它水平滚动，因为我在它旁边放置了一个侧边栏。另外，我打算动态添加列，所以我不能设置固定宽度。

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

当您的超宽桌子位于 960 像素的 div 内时会怎样？那我没有水平滚动条！ ://
@Ciwan，重新水平滚动条......我认为我的建议不一定是所有情况下的最佳解决方案。这是一个使用内置 Bootstrap 样式的选项，所以这很好。我见过的可折叠表的其他一些解决方案是 themergency.com/footable 、 zurb.com/playground/responsive-tables 和 css-tricks.com/responsive-data-table-roundup
当你有一张桌子时它不起作用，例如30 列，除非我手动缩小浏览器窗口的宽度。（不要问为什么桌子那么大，答案是“客户想要”）。
是的，我想我知道你的意思@Santhos。引用 BS 文档 getbootstrap.com/css/#tables 的话，“当查看任何大于 768 像素宽的东西时，您不会在这些表格中看到任何差异。”如果你想开始 JS fiddle，也许我可以为你玩弄它
谢谢，但没必要。它有一个非常简单的解决方案（至少对我来说），我只需要将表格放在一个 div 中，就像在表格响应案例中设置溢出来滚动一样。

【解决方案2】：

您也可以检查引导数据表插件以及上述问题。

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

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

有关示例的更多信息，请查看link

【讨论】：

哇！感谢您链接数据表。这对我来说是一个了不起的图书馆。希望我能早点知道。头脑=吹，哈哈！

【解决方案3】：

@Ciwan。你说得对。桌子全宽（太宽了）。不是一个好的解决方案。最好这样做：

css:

.scrollme {
    overflow-x: auto;
}

html:

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

编辑：将 scroll-y 更改为 scroll-x

【讨论】：

感谢帮助
我认为你的意思是 overflow-x 而不是 overflow-y