パーツ番号 10-09-07 ・ CSSのみ

複数日程比較表(固定値)

候補日程を横並びで比較できる表。おすすめ候補を背景色で目立たせ、日程調整依頼画面などで使える。

staticcss

プレビュー

ソースコード

HTML

<table class="cmp">
          <thead><tr><th>候補</th><th>日付</th><th>時間</th><th>空き</th></tr></thead>
          <tbody>
            <tr><td>A</td><td>7/15</td><td>14:00</td><td class="s ok">◎</td></tr>
            <tr class="rec"><td>B</td><td>7/17</td><td>10:00</td><td class="s ok">◎</td></tr>
            <tr><td>C</td><td>7/20</td><td>16:00</td><td class="s mid">○</td></tr>
          </tbody>
        </table>

CSS

.d10-09-07 .cmp{ border-collapse:collapse; font-size:11px; width:100%; max-width:240px; }
        .d10-09-07 .cmp th{ background:#f4f5f7; color:#8a8f98; font-weight:600; padding:5px 6px; }
        .d10-09-07 .cmp td{ padding:6px; text-align:center; border-bottom:1px solid #eceef1; color:#3a3f47; }
        .d10-09-07 .cmp tr.rec{ background:#e7edfd; }
        .d10-09-07 .cmp .s.ok{ color:#2f9e5c; font-weight:700; }
        .d10-09-07 .cmp .s.mid{ color:#3f6fe0; font-weight:700; }

クラス名 .d10-09-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。