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

テーブル（表）のレイアウトは、パソコンの画面では問題なく閲覧できますが、スマートフォンでは、各項目が縦に伸びてしまい読みにくくなることがあります。 その場合、メディアクエリで、スマートフォンの画面幅になった時には、th要素とtd要素に「display:block」を指定して、各項目を縦並びにしています。

[CSS]

table tr th, table tr td {
border: 1px solid
}

table tr th {
background-color: #999999;
color: #fff;
}

@media(max-width: 480px){
display: block;
border: none;
}

３列以上、複雑な表の場合はスクロールで対応

上記の方法は、２列の表の場合ですが、３列以上の表や複雑な表の場合は、table要素全体を囲ったdiv要素に「overflow: auto」を指定して、スマートフォンの場合は指でスクロールできるようにしています。表がはみ出した場合はスクロールバーが出ますが、ブラウザによってスクロールバーが見にくいことがあるため、確実にユーザーにスクロールできることを伝えるために、表の上や下に「➡スクロール」などと表示して対応します。

その他の対応

１．jQueryプラグインを使う 　　「Basic Table」「Crafty Responsive Table」「FooTable」などがあります。

２．HTML5で追加された「data-」からはじまる任意の属性名を使用し、各HTMLの要素に対して独自の値を設定します。