jQuery Mobile とテーブルの新しい ui-responsive クラスを使用すると、ビューポートが狭くなりすぎると、テーブルが 1 つの列に折りたたまれます。
ただし、ブラウザーをドラッグしてビューポートを小さくすると、最初の列見出しが取得され、テーブル フッターに追加されます。
十分な広さのビューポート:
狭いビューポート:
私のHTMLマークアップは次のとおりです。
<table data-role="table" class="ui-responsive">
<thead>
<tr class="ui-bar-b">
<th>Column Header 1</th>
<th>Column Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:center;">
<button data-icon="plus">Add</button>
</td>
</tr>
</tfoot>
</table>
ここで jsFiddle にデモを追加しました: http://jsfiddle.net/mtait/44k3E/2/
これは単なる Mobile CSS のバグですか? それとも既知のもので、回避策はありますか?
ありがとうございました、
マーク