2021.02.24
158
どうもですよ、はやちですよ( ˇωˇ )
今回は、テーブルレイアウトのスタイルを、レスポンシブの表示でもtableタグワンソースで見やすく対応させる方法をご紹介します。
縦組みになる設計
横に長くなったテーブルのセルをひとつにして、縦組みにする設計です。
CSSのみの方法
スマホサイズになった場合、内容がリスト形式になります。
CSSとJSを使用しての方法
tableタグを全てdivに置き換えて、CSSでレイアウトをする方法です。
カラムを変えずにスクロールをさせる設計
横に長くなったレイアウトの長さを変えずに、スマホサイズの際にスクロールさせる方法です。
全体がスクロール
tableを全体的にスクロールすることができます。
レイアウトが変更＋スクロール
タイトルのレイアウトが変更しつつ、なおかつ固定表示のまま内容だけがスクロールすることができます。
まとめ
運用によっては少々ルール付けしておかないと、これら以外の実装方法も提案せざるを得ないかもしれませんが、少しでも対応のヒントになれればいいなと思っております( ˇωˇ )
そのほかの対応がございましたら助言いただけるとうれぴっぴ( ˇωˇ )