表・料金表・比較表のCSS素材

スマホ幅（560px以下）では、左の見出しが上に、内容がその下に並び替わります。行は <tr> をコピーして増やせます。

1行おきの色は tbody tr:nth-child(even) で付けています。数字の列には cs-tb02__num を付けると、桁がそろって右寄せになります。

おすすめにしたい列のセルに cs-tb03__pick を付けます。上の「おすすめ」の札は見出しの data-badge の文字です。金額は例です。スマホでは表ごと横にスクロールします。

記号はCSSで描いています。セルには cs-tb04__o（○）cs-tb04__d（△）cs-tb04__x（×）を付け、中の文字（できる・一部・できない）は読み上げ用に残してあります。

横に長い表を、左の列を止めたまま横にスクロールして見せます（position: sticky）。列が多い料金表・在庫一覧に向きます。右端の影は「まだ続きがある」目印で、端までスクロールすると消えます。

スマホ幅（600px以下）では1行が1枚のカードになり、各セルの左に data-label の見出しが出ます。列を増やすときは data-label も書き足してください。

受付する時間帯は cs-tb07__on（●）、休みは cs-tb07__off（―）、一部だけは cs-tb07__part（▲）を付けます。記号の意味は表の下の注記に書いてください。

マウスを乗せたセルの行と列に色が付き、交わるセルが一番濃くなります（:has() を使用）。列を増やすときは、nth-child(5) の行をコピーして数字を変えます。

角を丸くするため border-collapse: separate にして、外側の枠だけを表全体に付けています。

見出しをまとめるセルは colspan（横）と rowspan（縦）で結合しています。数値は例です。

合計は <tfoot> に書きます。金額は例です。数字は等幅の数字（tabular-nums）で桁をそろえています。