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

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

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

幅600pxのテーブル

見出しA 見出しB 見出しC 見出しD
コンテンツA コンテンツA コンテンツAコンテンツA コンテンツAコンテンツAコンテンツA
コンテンツBコンテンツB コンテンツB コンテンツBコンテンツBコンテンツB コンテンツBコンテンツB
コンテンツCコンテンツCコンテンツC コンテンツCコンテンツCコンテンツCコンテンツC コンテンツCコンテンツC コンテンツCコンテンツCコンテンツC

HTML

CSS

tableを囲んだdivに

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

SNSでもご購読できます。