table のレスポンシブ化［モバイルでは横並び・PC では縦並び］を CSS で実現する

HTML でテーブルを組んだ時、表示エリアが広い PC であれば横並びでもよいが、スマホなどのモバイル端末で見たときにはセルが詰まって見づらくなってしまいます。

スマホなどのモバイル端末でテーブルを見た時には、th, td 共に縦に一列に並ぶようにすると、セルの中のテキストも詰まることなく見やすくなる。

以下、table のレスポンシブ切替をするための CSS レイアウト。

table セルのレイアウトを PC とモバイルで変更する CSS

@media screen and (max-width: 640px) {
	.table-mobile {
	  width: 100%;
	}
	.table-mobile th,
	.table-mobile td {
		width: auto;
		display: block;
		text-align: center;
	}
}

これをコピーして貼り付けるだけでテーブルのレイアウトが PC は横並び、モバイルでは縦並びになる。

使い方としては、table タグにモバイル用に組んだ上の CSS を class で貼り付ける。

<table class="table-mobile">

</table>

たったこれだけ。

肝は『media screen』でモバイル用のレイアウト切替と、『display: block;』で横並びを強制的に縦並びに切り替えている・・・それだけの原理です。

デモを用意しました