パーツ番号 10-02-06 ・ CSSのみ

営業時間テーブル

曜日ごとの営業時間を一覧表示し、本日の行をハイライト。定休日も明示。WordPressの店舗・サロン・クリニックの営業案内に便利です。

bookingcss

プレビュー

ソースコード

HTML

<table class="d10-02-06-tbl">
          <caption class="d10-02-06-cap">営業時間</caption>
          <tbody>
            <tr><th>月</th><td>10:00 - 19:00</td></tr>
            <tr><th>火</th><td>10:00 - 19:00</td></tr>
            <tr><th>水</th><td class="d10-02-06-off">定休日</td></tr>
            <tr><th>木</th><td>10:00 - 19:00</td></tr>
            <tr><th>金</th><td>10:00 - 21:00</td></tr>
            <tr class="d10-02-06-today"><th>土</th><td>09:00 - 18:00</td></tr>
            <tr><th>日</th><td>09:00 - 17:00</td></tr>
          </tbody>
        </table>

CSS

.d10-02-06-tbl{border-collapse:collapse;width:210px;font-size:12px;color:#334155}
        .d10-02-06-cap{font-weight:700;color:#0f172a;margin-bottom:8px;font-size:13px}
        .d10-02-06-tbl th{width:40px;text-align:center;padding:8px 0;background:#f1f5f9;border:1px solid #e2e8f0;font-weight:600;color:#475569}
        .d10-02-06-tbl td{padding:8px 12px;border:1px solid #e2e8f0;text-align:right}
        .d10-02-06-off{color:#ef4444;text-align:center;font-size:11px}
        .d10-02-06-today th{background:#6366f1;color:#fff}
        .d10-02-06-today td{background:#eef2ff;font-weight:700;color:#3730a3}

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