Bootstrap：流体表对于窗口来说太宽了答案

【问题标题】：Bootstrap: fluid table too wide for windowBootstrap：流体表对于窗口来说太宽了
【发布时间】：2013-01-21 10:20:52
【问题描述】：

我正在使用 twitter bootstrap 开发一个项目。我们有一个包含很多列的表格，并且几乎每次都会比浏览器窗口大。

这就是右边发生的事情：

表格边框保留在浏览器窗口中，而表格内容则不保留。如果我滚动，边框会留在原处，它们不会“跟随”浏览器窗口。

你可以看到问题on this jsfiddle。它适用于 Safari，不适用于 Chrome 或 Firefox。

布局是这样的：

<body>
  <div class='container-fluid'>
    <div class='row-fluid'>
      <div class='span1'>
        ... menusidebar here...
      </div>
      <div class='span11'>
        <table class="table table-striped table-bordered" style="white-space: nowrap">
          <thead>
            <tr>
            </tr>
          </thead>
          <tbody>
            <tr>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

我希望你能帮助我。如果您需要更多信息，请问，我很乐意提供。

这是一个 Rails 3.2 应用程序，在 2.2.1.1 版本中使用 gem bootstrap-sass（问题也出现在 2.2.2.0 中）。前三个数字反映了引导版本。

【问题讨论】：

标签： twitter-bootstrap html-table fluid-layout

【解决方案1】：

Bootstrap 具有以下应用于表格的样式：

table {
    max-width: 100%;
}

如果您在自定义样式表中覆盖该属性，它应该有望解决问题。将其更改为“无”应该可以工作。

table {
    max-width: none;
}

【讨论】：

实际上，我必须将其设置为“无”，我让您编辑您的答案。非常感谢:)
嗯，很奇怪，因为我通过 Firebug 将其更改为“自动”并且有效。啊，好吧，无论如何我都会在我的答案中将其更改为“无”。
注意：这已经过时了，随着 bootstrap3 的发布和即将推出的 bootstrap4 有更好的方法
TheGeorgeL 这些更好的方法有哪些？

【解决方案2】：

你可以应用 style = "overflow: auto;"在您的桌子上放置一个水平滚动条。因此，设计仍将保持响应。按照代码：

.table-scrollable{
    overflow: auto;
}

并在你的 div 上使用它：

<div class='span11 table-scrollable'>

【讨论】：

【解决方案3】：

我在互联网的某个地方找到了解决方案...

table {table-layout:fixed}

它使用引导程序 2 和 3 解决了 Firefox 和 IE 中的问题

【讨论】：

【解决方案4】：

这是唯一对我有用的解决方案...

。桌子 { 最大宽度：无；表格布局：固定； word-wrap：断词； }

【讨论】：

哦，谢谢！你说的对。这也是唯一对我有用的东西（Bootstrap 3）。
对我来说也是如此（Bootstrap 5.1.3）。谢谢。

【解决方案5】：

应用样式 = "overflow: auto;"对我来说工作得很好

【讨论】：

【解决方案6】：

如果您使用的是 Bootstrap 3，另一种方法是将表格包装在

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

这使表格具有响应性。

【讨论】：

谢谢，这帮助我解决了我的类似问题，点赞
绝对是这里的最佳答案
这应该被标记为最佳答案，干净并使用引导程序中已经存在的内容