2013-02-13 55 views
74

我的桌面在桌面上显示效果很好,但是一旦我尝试查看移动版本,我的桌面就会变得太宽而无法使用移动设备屏幕。我正在使用响应式布局。如何使用Bootstrap在移动设备上显示表格?

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

+2

我注意到,自举3.0将是有人认为他们会解决这个移动表的“问题”吗? – crzrcn 2013-02-13 03:51:30

+0

在Bootstrap 3中,表格看起来还是一样的。:( – 2013-08-23 13:27:15

+1

@GilesRoberts [如果通过“在Bootstrap 3中相同”表示“现在在Bootstrap 3中响应”,那么是的,它们是相同的](http:// getbootstrap.com/css/#tables-responsive) – 2013-10-04 05:54:35

回答

95

引导3引入responsive tables

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

感谢Jason Bradley用于提供一个例子: “移动第一”

Responsive Tables

+3

谢谢。就像99.9%的人一样,我没有仔细阅读更新的文档。我想我应该有。 – 2013-11-04 00:37:23

+1

@DavidBélanger文档是一件奇妙的事情:) – 2013-11-04 00:41:05

+1

确实,它是!另外,它正在做我想做的事情,所以对我来说这是一个二合一的! – 2013-11-04 01:08:55

52

你也可以考虑尝试这些方法之一,因为较大的表是无法在手机上究竟友好即使它的工作原理:

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

我偏爱'没有更多表格',但这显然取决于您的应用程序。

+2

奇妙的链接和三个真正伟大的解决方案!我不得不谷歌我回到这个问题只是为了upvote你的答案。谢谢! – Simon 2013-02-27 10:02:37

+2

只包含一个链接的答案是错误的堆栈溢出Ë tiquette。该页面可能会丢失,页面上的内容可能会更改,答案不会立即可见,答案也无法改善,等等。 顺便说一句,该链接不再指向正确的内容。 – Dennis 2014-03-07 21:24:34

+0

同意,但现在:https://web.archive.org/web/20130725223053/http://elvery.net/demo/responsive-tables – Chords 2014-03-07 21:50:31

相关问题