响应式表格

响应式设计一般用于适配用户各种移动设备。

我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。

响应式表格让页面内容在移动端和桌面设备上能够很好的适配。

响应式表格有两种类型:reflow(回流)列切换


回流表格

回流模型表格在屏幕尺寸足够大时是水平显示,而在屏幕尺寸达到足够小时,所有的数据会变成垂直显示。

创建表格,在 元素上添加 data-role="table" 和 "ui-responsive" 类:

实例

       

回流表格

回流模型表格在屏幕尺寸足够大时是水平显示,而在屏幕尺寸达到足够小时,所有的数据会变成垂直显示。

重置窗口大小查看效果:

CustomerID CustomerName ContactName Address City PostalCode Country
1 Alfreds Futterkiste Maria Anders Obere Str. 57 Berlin 12209 Germany
2 Antonio Moreno Taquer Antonio Moreno Mataderos 2312 Mico D.F. 05023 Mexico
3 Around the Horn Thomas Hardy 120 Hanover Sq. London WA1 1DP UK
4 Berglunds snabbk Christina Berglund Berguvsven 8 Lule S-958 22 Sweden

底部文本