複数日程比較テーブル

<table class="d10-07-01-table">
          <thead>
            <tr><th></th><th>候補A<br>7/12(日)</th><th>候補B<br>7/19(日)</th><th>候補C<br>7/26(日)</th></tr>
          </thead>
          <tbody>
            <tr><td>時間帯</td><td>10:00〜</td><td>14:00〜</td><td>18:00〜</td></tr>
            <tr><td>空き状況</td><td class="d10-07-01-ok">◎ 余裕あり</td><td class="d10-07-01-mid">△ 残りわずか</td><td class="d10-07-01-ok">◎ 余裕あり</td></tr>
            <tr><td>選択</td>
              <td><label class="d10-07-01-radio"><input type="radio" name="d10-07-01-date" checked><span></span></label></td>
              <td><label class="d10-07-01-radio"><input type="radio" name="d10-07-01-date"><span></span></label></td>
              <td><label class="d10-07-01-radio"><input type="radio" name="d10-07-01-date"><span></span></label></td>
            </tr>
          </tbody>
        </table>

.d10-07-01-table{width:100%;border-collapse:collapse;font-size:12px;}
        .d10-07-01-table th,.d10-07-01-table td{border:1px solid #e5e5e5;padding:6px 4px;text-align:center;}
        .d10-07-01-table thead th{background:#f4f4f4;font-weight:600;line-height:1.4;}
        .d10-07-01-table tbody td:first-child{background:#fafafa;font-weight:600;color:#555;}
        .d10-07-01-ok{color:#1a7a3c;font-weight:600;}
        .d10-07-01-mid{color:#b8860b;font-weight:600;}
        .d10-07-01-radio{display:inline-flex;cursor:pointer;}
        .d10-07-01-radio input{position:absolute;opacity:0;width:1px;height:1px;}
        .d10-07-01-radio span{width:16px;height:16px;border:2px solid #bbb;border-radius:50%;display:block;position:relative;}
        .d10-07-01-radio input:checked + span{border-color:#2f6fed;}
        .d10-07-01-radio input:checked + span::after{content:"";position:absolute;inset:3px;background:#2f6fed;border-radius:50%;}