负责 Bootstrap 的桌面操作

当表的宽度超过跨度的宽度时，如此页: http://jsfiddle.net/rcHdC/

您将看到表的内容在 span之外。

什么是迎合这种情况的最佳方法？

158535 次浏览
小开

可用的一个选项是 fooTable。工程伟大的响应网站，并允许您设置多个断点... FooTable Link

小开

在处理响应表时，您可以执行许多不同的操作。

我个人喜欢 Chris Coyier 的这种方法:

你可以在这里找到许多其他选择:

如果您可以利用 Bootstrap 并快速获得一些内容，那么您可以简单地使用类名”。隐藏电话”和“。隐藏一些行，但这种方法在许多情况下可能是最好的。更多信息(见“响应式实用工具类”) :

小开

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;
}
小开

如果你正在使用 Bootstrap 3和 Less，你可以通过更新文件将响应表应用到所有的分辨率:

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 值的。

我知道让所有表都有响应听起来可能不那么好，但是我发现在大型表(大量列)上启用 LG 是非常有用的。

希望能帮到别人。


提交答案