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

営業時間テーブル(曜日別)

曜日ごとの営業時間を一覧化した表。定休日は色を変えて区別する、店舗ページの基本情報欄に使える形式。

staticcss

プレビュー

ソースコード

HTML

<table class="biz">
          <tbody>
            <tr><td class="d">月〜金</td><td class="h">9:00 - 18:00</td></tr>
            <tr><td class="d">土曜日</td><td class="h">10:00 - 17:00</td></tr>
            <tr><td class="d">日曜日</td><td class="h off">定休日</td></tr>
            <tr><td class="d">祝日</td><td class="h off">定休日</td></tr>
          </tbody>
        </table>

CSS

.d10-09-05 .biz{ border-collapse:collapse; width:100%; max-width:220px; font-size:12px; }
        .d10-09-05 .biz td{ padding:7px 8px; border-bottom:1px solid #eceef1; }
        .d10-09-05 .biz .d{ color:#8a8f98; width:60px; }
        .d10-09-05 .biz .h{ color:#3a3f47; font-weight:600; text-align:right; }
        .d10-09-05 .biz .h.off{ color:#c1495a; }

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