質問: 以下のようなpc表示とsp表示のレスポンシブができる表を作成したいのですが、レスポンシブを見込んだhtmlの構造が全く分かりません。 table以外のタグでも試しましたが、実現できないのでお力添えをお願い致します。 ![pc表示](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/97c01f6bbef5430da799cf77f5f571eb.png) ![スマホ表示](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c18a4877cf48f051a48d5bfea87cc53f.png) ``` スタンダードコース (通常コース) 日数 60日 回数 16回 金額 129,000円 パーソナルトレーニング45分 + 有酸素運動15分 ``` ![現状](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/4aebaa53904dd1dbf922dc91618b9208.png) tableタグでなくても全く問題ないです。 どのようにコーディングをすれば良いかご教示頂けますと幸いです。
回答: やり方はいくつかあると思いますが、1つの方法を紹介します。 上段、中段の6つの項目、下段をそれぞれdivで囲みます。 上段と下段はpcとspでレイアウトは変わらないのでCSSはfont-sizeくらい変えるだけ。 中段はflexなどで横並びにする。 pcの中段は1段6項目なので、それぞれのwidthを均等(100% / 6)に設定する。 spの中段は1段2項目が3つなのでそれぞれにwidthを50%にすればうまく表示されます。