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

週間タイムテーブル(固定予定)

曜日と時間帯のマス目に予定を固定配置した週間表。サロンや教室の週間スケジュール表示に向く。

staticcss

プレビュー

ソースコード

HTML

<table class="tt">
          <thead><tr><th></th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th></tr></thead>
          <tbody>
            <tr><td class="tm">9:00</td><td></td><td class="ev">面談</td><td></td><td></td><td></td></tr>
            <tr><td class="tm">10:00</td><td class="ev">予約A</td><td></td><td></td><td class="ev">予約B</td><td></td></tr>
            <tr><td class="tm">11:00</td><td></td><td></td><td class="ev">施術</td><td></td><td></td></tr>
            <tr><td class="tm">12:00</td><td colspan="5" class="lunch">休憩</td></tr>
          </tbody>
        </table>

CSS

.d10-09-03 .tt{ border-collapse:collapse; font-size:10px; width:100%; max-width:260px; }
        .d10-09-03 .tt th{ background:#f4f5f7; color:#8a8f98; font-weight:600; padding:3px 2px; border:1px solid #eceef1; }
        .d10-09-03 .tt td{ border:1px solid #eceef1; text-align:center; padding:3px 2px; color:#3a3f47; height:20px; }
        .d10-09-03 .tt .tm{ color:#9098a3; background:#fafafc; }
        .d10-09-03 .tt .ev{ background:#e7edfd; color:#3f6fe0; font-weight:700; }
        .d10-09-03 .tt .lunch{ background:#f4f5f7; color:#9098a3; }

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