Question

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

这就是右边发生的事情：

The Problem

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

您可以看到问题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中）。前三个数字反映了bootstrap版本。

Answer 1

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


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

Answer 2

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

中

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

这使得表格响应。

Answer 3

Bootstrap将以下样式应用于表：

table {
    max-width: 100%;
}

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

table {
    max-width: none;
}

Answer 4

你可以应用style =“overflow：auto;”在你的桌子上放一个水平滚动条。因此，设计仍将保持响应。请遵循以下代码：

.table-scrollable{
    overflow: auto;
}

并在你的div上使用它：

<div class='span11 table-scrollable'>

Answer 5

应用style =“overflow：auto;”对我来说工作得很好

Answer 6

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

table {table-layout:fixed}

它解决了Firefox和Linux中的问题IE，带有bootstrap 2＆amp; 3

Bootstrap：流体表太宽，不适合窗户

6 个答案: