Twitter Bootstrap中的响应表处理

Question

当表的宽度超过跨度的宽度时,如下页所示:http://jsfiddle.net/rcHdC/

你会看到表格的内容不在span.

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

Answer 1

Bootstrap 3现在具有开箱即用的响应表.万岁!:)

添加<div class="table-responsive">你的桌子周围,你应该很高兴:

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

要使其适用于所有布局,您可以执行以下操作:

.table-responsive
{
    overflow-x: auto;
}

但它只适用于小型设备(768px以下):S来源:http://getbootstrap.com/css/#tables-responsive (7认同)
@ ase69s检查我更新的答案.刚才我需要在有很多列的桌子上.在自定义`CSS`文件中添加`overflow-x:auto`可以实现更大的显示布局. (3认同)
可能还想添加`.table-responsive td,.table-responsive th {white-space:nowrap; 确保单元格不会自动缩小并添加换行符. (2认同)

Answer 2

可用的一个选项是fooTable.在响应式网站上运行良好,允许您设置多个断点... fooTable链接

Answer 3

处理响应式表时,您可以执行许多不同的操作.

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

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

如果您可以利用Bootstrap快速获取某些内容,则只需使用类名".hidden-phone"和".hidden-tablet"来隐藏某些行,但在许多情况下这种方法可能是最好的.更多信息(请参阅"响应实用程序类"):