横に項目が複数あるテーブル

 
横に複数の列が必要な表は「表・テーブル」パーツからtableタグで作成することになります。tableで作る表はスマホで見た時、画面幅に無理やり収めて表示されるため各セルでは改行だらけでみにくくなりがちです。
そして、以外な盲点が、連続する半角英数字は改行されない ということです。横に並ぶ項目数が多く、それが半角数字の料金だった時、各セルないで改行されないため、表が画面幅(スマホ時)に収まりきらずに、本来の画面幅からはみ出しようになってしまいます。
このテーブル幅がはみ出すとき、テーブル部分だけを横スクロール処理になるように設定してあります。

Color

  通常料金 メンバー料金 子供料金
リタッチカラー ¥9,500 ¥8,550 ¥5,700
オールカラー ¥13,500 ¥12,150 ¥8,100
デザインカラー ¥6,000 ¥5,400 ¥3,600
ブリーチカラー ¥10,000 ¥9,000 ¥6,000
ダブルカラー ¥10,000 ¥9,000 ¥6,000
マニキュアカラー ¥9,000 ¥8,100 ¥5,400


Tablet View

SP View


 
※ 表の下に表だけの横スクロールが表示されています。