レスポンシブデザインのテーブルレイアウト

レスポンシブデザイン時のテーブルレイアウトの一つの参考。

600px以下で表示したときには、セルの幅が狭くなり過ぎて見づらくなるのを解消するため、横スクロールさせる。

幅600pxのテーブル

HTML

<div class="tblwrapper">
<table class="rdtbl">
<thead>
<tr>
<th>見出しA</th>
<th>見出しB</th>
<th>見出しC</th>
<th>見出しD</th>
</tr>
</thead>
<tbody>
<tr>
<td>コンテンツA</td>
<td>コンテンツA</td>
<td>コンテンツAコンテンツA</td>
<td>コンテンツAコンテンツAコンテンツA</td>
</tr>
<tr>
<td>コンテンツBコンテンツB</td>
<td>コンテンツB</td>
<td>コンテンツBコンテンツBコンテンツB</td>
<td>コンテンツBコンテンツB</td>
</tr>
<tr>
<td>コンテンツCコンテンツCコンテンツC</td>
<td>コンテンツCコンテンツCコンテンツCコンテンツC</td>
<td>コンテンツCコンテンツC</td>
<td>コンテンツCコンテンツCコンテンツC</td>
</tr>
</tbody>
</table>
</div>

CSS

.tblwrapper{
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;	
}
table.rdtbl{
	width:600px;
	border-collapse:collapse;
	border:1px solid #aaa;
}
table.rdtbl th,
table.rdtbl td{
	padding:8px;
	border:1px solid #aaa;
}
table.rdtbl th{
	background:rgb(165,255,255);
	text-align:center;
}

tableを囲んだdivに

overflow-x:auto;
-webkit-overflow-scrolling:touch;

を入れると、PCでは横スクロール、スマホなどでは左右にスワイプできます。