引导：流体表太宽的窗口(Bootstrap: fluid table too wide for wi

我正在使用Twitter的引导项目。我们有大量的列，并且将是比几乎每一次浏览器窗口大的表。

这是在右边发生了什么：

表格边框停留在浏览器窗口中，而该表内容不。如果我滚动，边境留他们在哪里，他们没有“跟随”浏览器窗口。

你可以看到这个问题在此的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版本的宝石引导-SASS（问题出现在2.2.2.0太）。前三个数字反映的引导版本。

Answer 1:

引导有应用到表以下样式：

table {
    max-width: 100%;
}

如果替换您的自定义样式表属性它应该有希望解决的问题。它更改为“无”应该工作。

table {
    max-width: none;
}

Answer 2:

这只是为我工作的解决方案......


    .table {
        max-width: none;
        table-layout: fixed;
        word-wrap: break-word;
    }

Answer 3:

如果您在引导3，另一种方法是来包装你的表在

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

这使得表响应。

Answer 4:

您可以将样式=“溢出：汽车;” 把一个水平滚动条在你的餐桌。因此，设计仍然会保持响应。按照代码：

.table-scrollable{
    overflow: auto;
}

并用它在你的DIV：

<div class='span11 table-scrollable'>

Answer 5:

应用样式=“溢出：汽车;” 工作得很好，我

Answer 6:

我在互联网上找到解决办法的地方...

table {table-layout:fixed}

它解决在Firefox＆IE的问题，自举2＆3

文章来源: Bootstrap: fluid table too wide for window