jQuery Mobile リファレンス

Tweet

data-mode=”reflow”はレスポンシブテーブルの設定を行う属性です。

data-role=”table”を指定した要素にdata-mode=”reflow”をあわせて指定することでテーブルをレスポンシブにすることができます。

thead要素を左に設定し、tbody要素の内容がその右側に表示されます。tbody要素内に複数のtrが存在する場合はそれぞれれの横にthead要素の内容が表示されます。

<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>
		<tr>
			<th>2</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

レスポンシブテーブルにはdata-mode=”reflow”以外にもdata-mode=”columntoggle”が存在します。

data-mode="reflow"はjQuery Mobile 1.3.0で追加された属性です。

参考URL

jQuery Mobile Docs - Responsive Table

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

同じカテゴリー(レスポンブテーブル)のエントリー

• data-column-btn-text
• data-priority
• data-mode=”columntoggle”
• data-mode=”reflow”