可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm working on a project using twitter bootstrap. We have a table that has lots of columns and is going to be larger than the browser window almost every time.

This is what happens on the right :

The table border stays in the browser window, while the table contents do not. If I scroll, the borders stay where they are, they do not "follow" the browser window.

You can see the problem on this jsfiddle. It works on Safari, not on Chrome or Firefox.

The layout is like this :

<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>

I hope you can help me. If you need more information, just ask, I'd be glad to supply.

This is a Rails 3.2 app, using the gem bootstrap-sass in version 2.2.1.1 (the problem appears in 2.2.2.0 too). The first three numbers reflect the bootstrap version.

回答1:

Bootstrap has the following style applied to Tables:

table {
    max-width: 100%;
}

If you override that property in your custom stylesheet it should hopefully solve the problem. Changing it to 'none' should work.

table {
    max-width: none;
}

回答2:

This was the only solution that worked for me...


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

回答3:

If you are on Bootstrap 3, another approach is to wrap your table in a

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

This makes the table responsive.

回答4:

You can apply the style = "overflow: auto;" to put a horizontal scroll bar at your table. Thus the design will still remain responsive. Follow the code:

.table-scrollable{
    overflow: auto;
}

And use it on your div:

<div class='span11 table-scrollable'>

回答5:

Applying the style = "overflow: auto;" worked just fine for me

回答6:

I found solution somewhere in internet...

table {table-layout:fixed}

It solve problems in Firefox & IE, with bootstrap 2 & 3

Bootstrap: fluid table too wide for window

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

收藏的人(0)

Bootstrap: fluid table too wide for window

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮