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

はやち


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

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

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

 

▼目次

縦組みになる設計

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

CSSのみの方法

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

CSSとJSを使用しての方法

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

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

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

全体がスクロール

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

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

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

まとめ

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

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

はやち
この記事を書いた人
はやち

フロントエンドエンジニア

おすすめ記事

Recommended by