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