twitter-bootstrap Bootstrap：流体表对于窗口来说太宽了
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14725342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: fluid table too wide for window
提问by ksol
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.
我正在使用 twitter bootstrap 进行一个项目。我们有一个包含很多列的表格，并且几乎每次都会比浏览器窗口大。
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.
你可以在这个 jsfiddle 上看到这个问题。它适用于 Safari，而不适用于 Chrome 或 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.
这是一个 Rails 3.2 应用程序，使用版本 2.2.1.1 中的 gem bootstrap-sass（问题也出现在 2.2.2.0 中）。前三个数字反映了引导程序版本。
采纳答案by Billy Moat
Bootstrap has the following style applied to Tables:
Bootstrap 将以下样式应用于表格：
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;
}
回答by diogoareia
This was the only solution that worked for me...
这是唯一对我有用的解决方案......
.table {
max-width: none;
table-layout: fixed;
word-wrap: break-word;
}
回答by Shirren
If you are on Bootstrap 3, another approach is to wrap your table in a
如果您使用 Bootstrap 3，另一种方法是将您的表格包裹在
<div class="table-responsive"><table>...</table></div>
This makes the table responsive.
这使表响应。
回答by Eduardo Arruda Pimentel
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:
您可以应用样式 = "overflow: auto;" 在你的桌子上放一个水平滚动条。因此，设计仍将保持响应。按照代码：
.table-scrollable{
overflow: auto;
}
And use it on your div:
并在您的 div 上使用它：
<div class='span11 table-scrollable'>
回答by user2245138
Applying the style = "overflow: auto;" worked just fine for me
应用样式 = "overflow: auto;" 对我来说很好用
回答by Rafa? Godziński
I found solution somewhere in internet...
我在互联网的某个地方找到了解决方案......
table {table-layout:fixed}
It solve problems in Firefox & IE, with bootstrap 2 & 3
它使用引导程序 2 和 3 解决了 Firefox 和 IE 中的问题
