trainアイコン

コラム

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

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

あわせて読みたい

  • コーディングはもう必要ない⁉︎レイアウトデザインのみでWebサイトの公開まで制作出来る「STUDIO」とは?

  • ブログイメージ画像

    Adobe illustrator2020 ブラシ一覧(アート、ベクトルパック編)

  • homepageimage

    レンタルサーバーの見直し・乗り換えをオススメしています!

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



Contact
お問い合わせ

ウェブ制作について
お気軽にお問い合わせください
お見積りは無料です

電話アイコン

052-531-7990

お電話でのお問い合わせ

メールアイコン

お問い合わせフォーム

メールでのお問い合わせ

ページトップへ