Html Twitter Bootstrap 中的响应式表格处理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15176714/
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
Responsive table handling in Twitter Bootstrap
提问by Ryan
When a table's width exceed the span's width, like this page: http://jsfiddle.net/rcHdC/
当表格的宽度超过跨度的宽度时，就像这个页面：http: //jsfiddle.net/rcHdC/
You will see the table's content is outside of the span.
您将看到表格的内容在span.
What would be the best method to cater this case?
处理这种情况的最佳方法是什么？
回答by Leniel Maccaferri
Bootstrap 3now has Responsive tables out of the box. Hooray! :)
Bootstrap 3现在具有开箱即用的响应表。万岁！:)
You can check it here: https://getbootstrap.com/docs/3.3/css/#tables-responsive
你可以在这里查看：https: //getbootstrap.com/docs/3.3/css/#tables-responsive
Add a <div class="table-responsive">surrounding your table and you should be good to go:
在<div class="table-responsive">您的桌子周围添加一个，您应该很高兴：
<div class="table-responsive">
<table class="table">
...
</table>
</div>
To make it work on all layouts you can do this:
要使其适用于所有布局，您可以执行以下操作：
.table-responsive
{
overflow-x: auto;
}
回答by Gfw
One option that is available is fooTable. Works great on a Responsive website and allows you to set multiple breakpoints... fooTable Link
一种可用的选项是 fooTable。在响应式网站上效果很好，并允许您设置多个断点... fooTable 链接
回答by Luis Evrythng
There are many different things you can do when dealing with responsive tables.
在处理响应式表格时，您可以做许多不同的事情。
I personally like this approach by Chris Coyier:
我个人喜欢 Chris Coyier 的这种方法：
You can find many other alternatives here:
您可以在这里找到许多其他选择：
- http://css-tricks.com/responsive-data-table-roundup/
- http://bradfrost.github.io/this-is-responsive/patterns.html#tables
- http://css-tricks.com/responsive-data-table-roundup/
- http://bradfrost.github.io/this-is-responsive/patterns.html#tables
If you can leverage Bootstrap and get something quickly, you can simply use the class names ".hidden-phone" and ".hidden-tablet" to hide some rows but this approach might to be the best in many cases. More info (see "Responsive utility classes"):
如果您可以利用 Bootstrap 并快速获得一些东西，您可以简单地使用类名“.hidden-phone”和“.hidden-tablet”来隐藏一些行，但这种方法在许多情况下可能是最好的。更多信息（请参阅“响应式实用程序类”）：
回答by Mauricio
If you are using Bootstrap 3 and Less you could apply the responsive tables to all resolutions by updatingthe file:
如果您使用的是 Bootstrap 3 和 Less，您可以通过更新文件将响应表应用于所有分辨率：
tables.less
or overwriting this part:
或覆盖此部分：
@media (max-width: @screen-xs) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid @table-border-color;
// Tighten up spacing and give a background color
> .table {
margin-bottom: 0;
background-color: #fff;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}
With:
和：
@media (max-width: @screen-lg) {
.table-responsive {
width: 100%;
...
Note how I changed the first line @screen-XX value.
请注意我如何更改第一行 @screen-XX 值。
I know making all tables responsive may not sound that good, but I found it extremely useful to have this enabled up to LG on large tables (lots of columns).
我知道让所有表都响应可能听起来不是那么好，但我发现在大表（很多列）上将它启用到 LG 非常有用。
Hope it helps someone.
希望它可以帮助某人。
