When a table's width exceed the span's width, like this page: http://jsfiddle.net/rcHdC/
You will see the table's content is outside of the span
.
What would be the best method to cater this case?
When a table's width exceed the span's width, like this page: http://jsfiddle.net/rcHdC/
You will see the table's content is outside of the span
.
What would be the best method to cater this case?
Bootstrap 3现在有开箱即用的响应表。万岁!:)
你可以在这里查看:https ://getbootstrap.com/docs/3.3/css/#tables-responsive
在你的桌子周围添加一个<div class="table-responsive">
,你应该很高兴:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
要使其适用于所有布局,您可以执行以下操作:
.table-responsive
{
overflow-x: auto;
}
一个可用的选项是 fooTable。在响应式网站上效果很好,并允许您设置多个断点... fooTable Link
在处理响应式表格时,您可以做很多不同的事情。
我个人喜欢 Chris Coyier 的这种方法:
您可以在此处找到许多其他替代方案:
如果您可以利用 Bootstrap 并快速获得一些东西,您可以简单地使用类名“.hidden-phone”和“.hidden-tablet”来隐藏一些行,但这种方法在许多情况下可能是最好的。更多信息(参见“响应式实用程序类”):
如果您使用的是 Bootstrap 3 和更少,您可以通过更新文件将响应表应用于所有分辨率:
tables.less
或覆盖这部分:
@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;
}
}
}
}
}
}
和:
@media (max-width: @screen-lg) {
.table-responsive {
width: 100%;
...
请注意我是如何更改第一行 @screen-XX 值的。
我知道让所有表都响应可能听起来不太好,但我发现在大型表(很多列)上启用此功能非常有用。
希望它可以帮助某人。