21

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

这是右边发生的事情：

问题

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

你可以在这个 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 中）。前三个数字反映了引导版本。

4

6 回答 6

29

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

    。桌子 {
        最大宽度：无；
        表格布局：固定；
        word-wrap：断词；
    }
于 2013-09-20T17:09:58.500 回答
23

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

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

这使得表格响应。

于 2014-03-21T00:34:28.490 回答
7

Bootstrap 将以下样式应用于表格：

table {
    max-width: 100%;
}

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

table {
    max-width: none;
}
于 2013-02-06T15:28:32.357 回答
4

您可以应用样式=“溢出：自动；” 在您的桌子上放置一个水平滚动条。因此，设计仍将保持响应。按照代码：

.table-scrollable{
    overflow: auto;
}

并在你的 div 上使用它：

<div class='span11 table-scrollable'>
于 2013-05-05T22:28:22.203 回答
0

应用样式=“溢出：自动；” 对我来说工作得很好

于 2013-09-28T19:52:13.963 回答
-1

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

table {table-layout:fixed}

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

于 2013-08-28T09:14:58.190 回答