テーブルタグをレスポンシブサイトでも見やすくする方法・4選

テーブルタグをレスポンシブサイトでも見やすくする方法・4選

はやち

はやち

どうもですよ、はやちですよ( ˇωˇ )

今回は、テーブルレイアウトのスタイルを、レスポンシブの表示でもtableタグワンソースで見やすく対応させる方法をご紹介します。

 

縦組みになる設計

横に長くなったテーブルのセルをひとつにして、縦組みにする設計です。

CSSのみの方法

スマホサイズになった場合、内容がリスト形式になります。

CSSとJSを使用しての方法

tableタグを全てdivに置き換えて、CSSでレイアウトをする方法です。

カラムを変えずにスクロールをさせる設計

横に長くなったレイアウトの長さを変えずに、スマホサイズの際にスクロールさせる方法です。

全体がスクロール

tableを全体的にスクロールすることができます。

レイアウトが変更+スクロール

タイトルのレイアウトが変更しつつ、なおかつ固定表示のまま内容だけがスクロールすることができます。

まとめ

運用によっては少々ルール付けしておかないと、これら以外の実装方法も提案せざるを得ないかもしれませんが、少しでも対応のヒントになれればいいなと思っております( ˇωˇ )

そのほかの対応がございましたら助言いただけるとうれぴっぴ( ˇωˇ )

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL