やりたいこと
PCでは２〜３カラム、SPでは1カラムの料金表にしたい
イメージ
出来上がったコード
表組みだとやりたいイメージを実現できないので、リストで書きます。
index.html
<ulclass="price_list"><li><strong>本日のおすすめラム料理</strong>2000円</li><li><strong>ラムケバブ（２本）</strong>800円</li><li><strong>ラムチョップ（２本）</strong>800円</li><li><strong>ラム＆チップス</strong>800円</li><li><strong>揚げたて！ラム唐揚げ</strong>1000円</li><li><strong>おいしいラムのソテー</strong>1000円</li><li><strong>ラム餃子</strong>1000円</li><li><strong>マトンカレー</strong>1200円</li><li><strong>ラムシチュー</strong>1200円</li></ul>2カラムにするために column-countを使います。
style.css
ul.price_list{list-style:none;column-count:2;column-gap:40px;margin:5%;padding:0;}ul.price_listli{display:inline-flex;padding-bottom:8px;border-bottom:#d2d2d21pxdotted;margin-bottom:8px;width:100%;color:#cc0000;}ul.price_listlistrong{font-weight:normal;color:#333;margin-right:auto;}@mediascreenand(max-width:500px){ul.price_list{column-count:1;}}column-countで分割する要素がブロック要素の場合、↓のようにpaddingやborderなどがズレてしまいます。
column-count内の要素はインライン要素にしてください。
今回はメニューと料金を分けるために inline-flexを使用しているのがポイントです。
実際のサンプル
See the Pen 2カラムの料金表サンプル by Mei Koutsuki (@mei331)on CodePen.