色分けシフト勤務表

<div class="d05-14-08-wrap">
          <table class="d05-14-08-table">
            <thead><tr><th></th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th></tr></thead>
            <tbody>
              <tr><td>佐藤</td><td class="s-am">早</td><td class="s-pm">遅</td><td class="s-am">早</td><td class="s-off">休</td><td class="s-pm">遅</td></tr>
              <tr><td>鈴木</td><td class="s-pm">遅</td><td class="s-am">早</td><td class="s-off">休</td><td class="s-am">早</td><td class="s-am">早</td></tr>
              <tr><td>田中</td><td class="s-off">休</td><td class="s-pm">遅</td><td class="s-pm">遅</td><td class="s-am">早</td><td class="s-off">休</td></tr>
            </tbody>
          </table>
          <div class="d05-14-08-legend"><span class="s-am">早番</span><span class="s-pm">遅番</span><span class="s-off">休み</span></div>
        </div>

.d05-14-08-wrap{width:100%}
        .d05-14-08-table{border-collapse:collapse;width:100%;font-size:10px}
        .d05-14-08-table th{padding:5px 4px;text-align:center;color:#374151;border-bottom:1px solid #e5e7eb}
        .d05-14-08-table td{padding:5px 4px;text-align:center;color:#374151}
        .d05-14-08-table td:first-child{text-align:left;font-weight:700;color:#111}
        .d05-14-08-table .s-am{background:#dbeafe;color:#1d4ed8;border-radius:4px}
        .d05-14-08-table .s-pm{background:#fef3c7;color:#b45309;border-radius:4px}
        .d05-14-08-table .s-off{background:#f3f4f6;color:#9ca3af;border-radius:4px}
        .d05-14-08-legend{display:flex;gap:10px;margin-top:8px;font-size:9px}
        .d05-14-08-legend span{padding:2px 8px;border-radius:99px;font-weight:600}
        .d05-14-08-legend .s-am{background:#dbeafe;color:#1d4ed8}
        .d05-14-08-legend .s-pm{background:#fef3c7;color:#b45309}
        .d05-14-08-legend .s-off{background:#f3f4f6;color:#9ca3af}