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

Question

我的桌子在桌面上显示得很好,但是一旦我尝试查看移动版本,我的桌子就会变得太宽,无法移动设备屏幕.我正在使用响应式布局.

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

Answer 1

Bootstrap 3引入了响应表:

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

Bootstrap 4类似,但通过一些新类具有更多控制:

...响应所有视口...用.table-responsive.或者,选择一个最大断点,使用该断点可以获得响应表.table-responsive{-sm|-md|-lg|-xl}.

感谢杰森-布拉德利提供一个例子:

响应表

谢谢.像99.9%的人一样,我没有费心阅读更新的文档.我想我应该有. (5认同)
@ ta.speot.is我意识到我误读了文档并且错误地使用了类.我正在向表本身添加`.table-responsive`(例如`<table class ="table table-responsive">`),而不是将表包装在`.table-responsive`中,你甚至在你的指针中指出例. (5认同)
@DavidBélanger文档是一件很棒的事情:) (2认同)

Answer 2

您也可以考虑尝试使用其中一种方法,因为较大的表在移动设备上并不完全友好,即使它有效:

我偏爱"没有更多的桌子",但这显然取决于你的申请.

神奇的链接和三个非常好的解决方案!我不得不谷歌回到这个问题只是为了回报你的答案.谢谢! (3认同)
仅由链接组成的答案是糟糕的Stack Overflow礼仪.页面可能会丢失,页面上的内容可能会更改,答案不会立即显示,答案无法改进,等等.BTW链接不再指向正确的内容. (2认同)

Answer 3

bootstrap 中的所有表格都根据它们所在的容器进行拉伸。您可以将表格放在.span元素中以控制大小。这个SO问题可以帮助你