如何使用Bootstrap在移动设备上显示表格？

我的表格在桌面上可以很好地显示，但是一旦尝试查看移动版本，我的表格最终对于移动设备屏幕来说太宽了。我正在使用响应式布局。

如何为移动视图设置表格宽度？还有什么其他替代方法可以使用Bootstrap在移动视图上显示表格数据？

twitter-bootstrap twitter-bootstrap-3

— 甘德斯
source

我注意到，Bootstrap 3.0将成为“移动优先”。是否有人认为他们会解决移动表的这一“问题”？

在Bootstrap 3中，表格似乎还是一样。:(

— Giles Roberts

@GilesRoberts 如果用“在Bootstrap 3中相同”来表示“现在在Bootstrap 3中响应”，那么是的，它们是相同的。

— ta.speot。是

@ ta.speot.is现在，它们比候选版本更好。尽管那里的所有示例只有4列。对于宽桌仍然不能很好地工作。我最终使用的解决方案具有固定的第一列，其余所有滚动。

— 吉尔斯·罗伯茨

@ ta.speot.is刚刚在下面看到了您的答案。忽略了Bootstrap 3具有表响应类。如果您不需要某些列始终可见，则效果很好。

— 吉尔斯·罗伯茨

Answers:

122

Bootstrap 3引入了响应表：

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

Bootstrap 4与之类似，但通过一些新类具有更多控制权：

...响应在所有视...用.table-responsive。或者，使用来选择一个最大的断点，以使其具有响应表.table-responsive{-sm|-md|-lg|-xl}。

信贷贾森·布拉德利提供一个例子：

响应表

— ta.speot.is
source

谢谢。就像99.9％的人一样，我也没有去阅读更新文档。我想我应该有。

— 大卫·贝朗格

的确是！另外，它起初就是我想要的，所以对我来说是2合1！

— 大卫·贝朗格

这table-responsive堂课到底是做什么的？Bootstrap文档说“使它们水平滚动”，但我没有注意到与滚动相关的区别。我注意到的唯一区别是，表在特定屏幕尺寸下（如示例所示）在外部具有边框。

— 丹尼斯

@ ta.speot.is我意识到我误读了文档并且使用了错误的类。我是在添加.table-responsive表格本身（例如<table class="table table-responsive">），而不是将表格包装在中.table-responsive，您甚至在示例中也指出了这一点。

— 丹尼斯

@PirateApp hidden-*在td要隐藏getbootstrap.com/docs/3.3/css/#sensitive-utilities

— ta.speot.is是

您还可以考虑尝试以下方法之一，因为即使可以使用较大的表，它在移动设备上也不是完全友好的：

http://elvery.net/demo/sensitive-tables/

我偏爱“ No Tables”，但这显然取决于您的应用程序。

— 和弦
source

神奇的链接和三个非常好的解决方案！我不得不用谷歌搜索这个问题，只是为了支持您的答案。谢谢！

— 西蒙（Simon）

一个仅由链接组成的答案就是糟糕的堆栈溢出礼节。页面可能会丢失，页面上的内容可能会更改，答案无法立即显示，答案无法改善，等等。顺便说一句，链接不再指向正确的内容。

— 丹尼斯

同意，但目前为止

— 和弦，

@丹尼斯是正确的。请详细说明您的答案以总结链接中的内容，并保留该链接以获取演示和更多详细信息。尽管如此，您还是得到了我的好评，因为该链接非常有趣。干杯。

— 马里奥·阿瓦德

引导程序中的所有表都会根据它们所在的容器进行拉伸。您可以将表放在一个 .span元素中以控制大小。这样的问题可能会帮助您

为什么Twitter Bootstrap表始终具有100％的宽度？

— 马特·布什
source