[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア

Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。

省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。

デモのキャプチャレスポンシブ対応のテーブル

Responsive table layout

レスポンシブ対応のテーブルのデモ

デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。

デモのキャプチャ

Simple Responsive Table in CSS: 幅1,200pxで表示

デモのキャプチャ

Simple Responsive Table in CSS: 幅800pxで表示

デモのキャプチャ

Simple Responsive Table in CSS: 幅480pxで表示

レスポンシブ対応のテーブルの実装

まずは、通常のテーブルの実装を確認しておきましょう。

HTML

テーブルの実装はごく普通で、4つのカラムを持っています。

CSS

各セルの区切りは、水平に1pxのラインをいれ、垂直のラインはありません。

HTML: レスポンシブ対応

各セルに「aria-label」を加えます。
レスポンシブ対応のレイアウトのために使用しますが、「aria-label」はアクセシビリティにももちろん有益です。

CSS: レスポンシブ対応

600px以下のスクリーンでは、trとtdはテーブルの行とセルとしてではなく、ブロックレベルとして機能するように指定します。

600px以下のスクリーンでは、下記のように各行ごとに一つのブロックになり、積み重なって表示されます。

デモのキャプチャ

Simple Responsive Table in CSS: 幅480pxで表示

top of page

©2017 coliss