名古屋市の中小企業向けホームページ制作
名古屋市のホームページ制作の有限会社ステイション

ブログ

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

WEB 2020/09/07

テーブル(表)のレイアウトは、パソコンの画面では問題なく閲覧できますが、スマートフォンでは、各項目が縦に伸びてしまい読みにくくなることがあります。 その場合、メディアクエリで、スマートフォンの画面幅になった時には、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;
}

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

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

その他の対応

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

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

  

関連記事

  • 鳴門魚類株式会社様

  • 株式会社丸八化成様

  • ねこログ vol.6

  • 株式会社サンぽぱい様



Contact
お問い合わせ

見積もり、ウェブ制作について
お気軽にお問い合わせください

電話アイコン

052-531-7990

お電話でのお問い合わせ

メールアイコン

お問い合わせフォーム

メールでのお問い合わせ

ページトップへ