jQuery Mobile表格

响应表

当您希望您的移动网页向用户的设备，回应的内容响应式设计是非常有用的，例如它的屏幕大小和方向。

用一个简单的类名，jQuery Mobile的是知道用户的可用的屏幕尺寸和自动调整自身以显示相关的内容对于特定的用户。

响应表让我们展示一大套的表格数据，这将令人神往为移动设备和台式机。

有两种类型的响应表：回流和柱切换 。

回流表

回流模式水平定位表中的数据，直到其达到最小尺寸，那么所有的行被垂直地组合在一起。

创建一个表，添加数据角色=“表”和一类的"ui-responsive"上<table>元素：

例

试一试»

为响应表正常工作，您必须包含<thead>和<tbody>元素。
不要使用ROWSPAN或合并单元格属性; 它们没有在响应表格的支持。

切换栏表

“列切换”模式将隐藏的列时，没有足够的宽度来显示数据。

要创建一个列切换表，添加以下到<table>元素：

默认情况下，jQuery Mobile的将隐藏在表的右侧列。但是，允许您指定要隐藏或以特定的顺序显示这些列。添加数据优先级属性表中的头(<th>)并指定在1（最高优先级）到6（最低优先级）一个数字：

<th>I will never be hidden</th>
<th data-priority="1" >I am very important - I will probably not be hidden</th>
<th data-priority="3" >I am less important - I could be hidden</th>
<th data-priority="5" >I am not that important - there is a good chance that I will be hidden</th>

如果你不为字段指定一个优先级，列将是持久的，而不是供躲藏。

把它放在一起，你已经创建了一个列切换台！注意，该框架在表的右上角自动添加一个按钮。这可让用户选择在表中显示哪些列：

例

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable" >
<thead>
    <tr>
      <th data-priority="6" >CustomerID</th>
      <th>CustomerName</th>
      <th data-priority="1" >ContactName</th>
      <th data-priority="2" >Address</th>
      <th data-priority="3" >City</th>
      <th data-priority="4" >PostalCode</th>
      <th data-priority="5" >Country</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>1</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Obere Str. 57</td>
      <td>Berlin</td>
      <td>12209</td>
      <td>Germany</td>
    </tr>
</tbody>
</table>

试一试»

要改变切换表格按钮文本，使用数据列BTN-text属性：