ブログ

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

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の要素に対して独自の値を設定します。

ステイションは名古屋市西区のウェブサイト制作、ホームページデザインの会社です。
名古屋市、愛知県内はもとより、東海三県、全国からお仕事を承っております。
ホームページに関する無料相談、無料診断、ホームページ企画提案のご相談を随時お受けしております。
TEL 052-531-7990
またはお問い合わせフォームよりお気軽にお問い合わせください。
ステイション・トップページへはこちら

  

Categories

関連記事

  • ワードプレスとは?

    WordPress(ワードプレス)とは

  • 「お弁当」仁美の徒然草

  • ホームページのコンセプト・企画書の作り方

  • キャッシュクリアの方法 -Google chromeの場合



Contact
お問い合わせ

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

電話アイコン

052-531-7990

お電話でのお問い合わせ

メールアイコン

お問い合わせフォーム

メールでのお問い合わせ

ページトップへ