作るのは数字だけじゃない / デジタルハリウッド
作るのは数字だけじゃない / デジタルハリウッド
2017.09.04
#99
それいけ!フロントエンド

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

はやち

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

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

 

縦組みになる設計

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

CSSのみの方法

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

CSSとJSを使用しての方法

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

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

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

全体がスクロール

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

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

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

まとめ

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

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