table

data-role=”table”はレスポンシブテーブルを作成するための属性です。

data-role=”table”とdata-mode=”reflow”もしくはdata-mode=”columntoggle”をあわせて指定することでtable要素で作成されたテーブルをデバイスに合わせた形に最適化を行ないます。

次のサンプルはdata-mode=”reflow”により、5列2行のテーブルを2列に5行に変換しています。

<table data-role="table" id="my-table" data-mode="reflow">
	<thead>
		<tr>
			<th>Rank</th>
			<th>Movie Title</th>
			<th>Year</th>
			<th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
			<th>Reviews</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td><a href="foo.com" data-rel="external">Citizen Kane</a></td>
			<td>1941</td>
			<td>100%</td>
			<td>74</td>
		</tr>
	</tbody>
</table>

sample

レスポンシブテーブルではtable要素にユニークなid属性とthead要素、tbody要素が必要です。また、rowspan属性、colspan属性には対応していません。

jQuery Mobile 1.3.0での追加/変更

data-role="table"はjQuery 1.3.0で追加された属性です。

登録日 : 2013年02月12日最終更新日 : 2016年12月19日

jQuery Mobile リファレンス

table

同じカテゴリー(data-role)のエントリー

検索

スポンサードリンク

バージョン

リファレンス