Hide and show table inside table when check box is checked in pure css

Question

I want to send mail with the below template from code. I am trying to hide and display the secondary table with the checkbox. I think I am stuck with the css selector. Is it possible to hide and show something with the checkbox. Important thing is I want to do it in only css , " NO JS " Here is the codepen edit link : https://codepen.io/rishisarma/pen/QWqyqXd?editors=1100

.box {
  display:none;
}

<-- Here is the issue I think when I tried to hide and display the table it is not working.-->

input[id='trigger']:checked  table.box{
  display:block;
}
table {
  font-family: "Trebuchet MS";
  margin: 8px;
}
tr:nth-child(odd) {
  background-color: #f7f7f7;
}
.rightalign {
  text-align: right;
  width: 125px;
}
th {
  background-color: #e84f32;
  padding: 8px;
  color: white;
  border: 1px solid #e0e0e0;
}
td {
  padding: 8px;
  border: 1px solid #e0e0e0;
}

<table>
  <thead>
    <tr>
      <th colspan="9" style="width:100%;" id="head">Client Wise                 AttendenceReport (2021/12/05)</th>
    </tr>
    <tr>
      <th></th>
      <th>SRNO</th>
      <th>Customer</th>
      <th>Organizations</th>
      <th>Attendees (2021/12/04)</th>
      <th>Attendees (2021/12/05)</th>
      <th>Txns (2021/12/04)</th>
      <th>Txns (2021/12/05)</th>
      <th>Inclination (%)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" id="trigger">
      </td>
      <td>1</td>
      <td>TSTS</td>
      <td>33 (0%)</td>
      <td>1605382</td>
      <td>1605563 (0.01)</td>
      <td>139313</td>
      <td>20726</td>
      <td>-85.12</td>
    </tr>
    <tr>
      <td colspan="9">
      <table class = "box">
        <tr>
          <td colspan="5" style="background-color: #e84f32; padding:               8px; color:white; text-align:center">Organisation Wise                   Transaction Report On 05-Dec- 2021</td>
        </tr>
        <tr>
          <th>Slno</th>
          <th>Organisation</th>
          <th>Registered Users</th>
          <th>Present Today</th>
          <th>Percent(%)</th>
        </tr>
        <tr>
          <td>1</td>
          <td>TSTSATTENDANCE</td>
          <td class="rightalign">294</td>
          <td class="rightalign">3</td>
          <td class="rightalign">1%</td>
        </tr>
      </table>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>2</td>
      <td>GVK</td>
      <td>2 (0%)</td>
      <td>1329</td>
      <td>1329 (0)</td>
      <td>681</td>
      <td>686</td>
      <td>0.73</td>
    </tr>
    <tr>
      <td></td>
      <td>3</td>
      <td>SIL</td>
      <td>33 (0%)</td>
      <td>202240</td>
      <td>203042 (0.4)</td>
      <td>111348</td>
      <td>7519</td>
      <td>-93.25</td>
    </tr>
  </tbody>
</table>