响应式表格
响应式设计一般用于适配用户各种移动设备。
我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。
响应式表格让页面内容在移动端和桌面设备上能够很好的适配。
响应式表格有两种类型:reflow(回流)与列切换。
回流表格
回流模型表格在屏幕尺寸足够大时是水平显示,而在屏幕尺寸达到足够小时,所有的数据会变成垂直显示。
创建表格,在
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 |
底部文本
运行实例 »
点击 "运行实例" 按钮查看在线实例
对于响应式表格,你必须包含 和 |
列切换
列切换模型会在宽度不够时隐藏数据。
列切换的表格创建方式如下:
)通过添加 data-priority 属性指定隐藏列的顺序,data-priority 的值可以是 1 (最高优先级) 到 6 (最低优先级):
|
---|