twitter-bootstrap – Bootstrap：窗口的表格太宽

我正在使用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中).前三个数字反映了引导版本.

解决方法

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

table {
    max-width: 100%;
}

如果您在自定义样式表中覆盖该属性,则应该希望解决问题.将其更改为“自动”应该工作.

table {
    max-width: none;
}

twitter-bootstrap – Bootstrap：窗口的表格太宽

解决方法

相关文章