パーツ番号 05-14-04 ・ CSSのみ

営業時間案内テーブル

曜日ごとの営業時間と定休日を一覧化したシンプルな案内テーブル。店舗・クリニックのアクセスページや固定フッターに設置しやすい。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-14-04-table">
          <tbody>
            <tr><th>月〜金</th><td>10:00 - 20:00</td></tr>
            <tr><th>土曜日</th><td>10:00 - 18:00</td></tr>
            <tr><th>日曜日</th><td>11:00 - 17:00</td></tr>
            <tr class="d05-14-04-off"><th>祝日</th><td>定休日</td></tr>
          </tbody>
        </table>

CSS

.d05-14-04-table{border-collapse:collapse;font-size:12px;width:100%}
        .d05-14-04-table th{text-align:left;padding:10px 12px;color:#111;font-weight:600;border-bottom:1px solid #eee;width:40%}
        .d05-14-04-table td{padding:10px 12px;color:#444;border-bottom:1px solid #eee;text-align:right}
        .d05-14-04-off th,.d05-14-04-off td{color:#b91c1c;font-weight:700;border-bottom:none}

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