Bootstrap:流体表太宽,不适合窗户

Question

Bootstrap:流体表太宽,不适合窗户

kso*_*sol 18 html-table fluid-layout twitter-bootstrap

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

我希望你能帮助我.如果您需要更多信息,请问,我很乐意供应.

这是一个Rails 3.2应用程序,使用版本2.2.1.1中的gem bootstrap-sass(问题也出现在2.2.2.0中).前三个数字反映了bootstrap版本.

Answer 1

小智 24

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


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

Answer 2

小智 20

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

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

Run Code Online (Sandbox Code Playgroud)

这使得表格响应.

Answer 3

Bil*_*oat 6

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

table {
    max-width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

如果您在自定义样式表中覆盖该属性,它应该有望解决问题.将其更改为"无"应该有效.

table {
    max-width: none;
}

Run Code Online (Sandbox Code Playgroud)

TheGeorgeL这些更好的方法是什么？ (4认同)

归档时间：	12 年，10 月前
查看次数：	39093 次
最近记录：	8 年，3 月前