レスポンシブ・デザインは、モバイル Web ページのコンテンツを、画面のサイズや向きなどのようなユーザのデバイスに反応させたい場合に便利です。

シンプルなクラス名により、jQuery Mobile は、ユーザの使用可能な画面サイズを認識してコンテンツを表示するため、特定のユーザに適切なサイズに自動的に変更します。

レスポンシブ・テーブルは、モバイルとデスクトップの両方にとり、魅力的な外観を持った表データの大きな集合の表示を可能にします。

レスポンシブ・テーブルには、reflow と column toggle の 2種類があります。

Reflow テーブル

リフローモードでは、最小サイズになるまでテーブルデータを横に配置し、すべての行を縦方向にグループ化します（訳注：行を列方向に表示するもの）。

テーブルを作成し、<table> 要素に data-role="table" と "ui-responsive" クラスを追加します：

レスポンシブ・テーブルが正しく動作するためには、 <thead> と <tbody> 要素を使用しなければなりません。
rowspan や colspan 属性は使用しないでください。レスポンステーブルではサポートされていません。

Column Toggle テーブル

"column toggle" モードは、データを表示するのに十分な幅がない場合に、列を非表示にします。

column toggle テーブルを作成するには、<table> 要素に次の行を追加します：

デフォルトでは、jQuery Mobile はテーブルの右側から列を非表示にします。ただし、特定の順序で表示または非表示にする列を指定することはできます。表のヘッダー（<th>）に data-priority 属性を追加し、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>

列に優先順を指定しない場合、列は persistent（永続的に）表示され、非表示には使用できません。.

すべてをまとめて、column toggle テーブルを作成しました！フレームワークは自動的にテーブルの右上隅にボタンを追加するのに注意してください。これによって、ユーザは表示する列を選択できるようになります：

例

<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>

Try it Yourself »

toggle テーブルのボタン・テキストを変更するには、data-column-btn-text 属性を使用します：