title: Hide and show table inside table when check box is checked in pure css
body: <p>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 , &quot; NO JS &quot; Here is the codepen edit link : <a href="https://codepen.io/rishisarma/pen/QWqyqXd?editors=1100" rel="nofollow noreferrer">https://codepen.io/rishisarma/pen/QWqyqXd?editors=1100</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    display:none;
  }
  
  &lt;-- Here is the issue I think when I tried to hide and display the table it is not working.--&gt;
  
  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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th colspan="9" style="width:100%;" id="head"&gt;Client Wise                 AttendenceReport (2021/12/05)&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;SRNO&lt;/th&gt;
        &lt;th&gt;Customer&lt;/th&gt;
        &lt;th&gt;Organizations&lt;/th&gt;
        &lt;th&gt;Attendees (2021/12/04)&lt;/th&gt;
        &lt;th&gt;Attendees (2021/12/05)&lt;/th&gt;
        &lt;th&gt;Txns (2021/12/04)&lt;/th&gt;
        &lt;th&gt;Txns (2021/12/05)&lt;/th&gt;
        &lt;th&gt;Inclination (%)&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" id="trigger"&gt;
        &lt;/td&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;TSTS&lt;/td&gt;
        &lt;td&gt;33 (0%)&lt;/td&gt;
        &lt;td&gt;1605382&lt;/td&gt;
        &lt;td&gt;1605563 (0.01)&lt;/td&gt;
        &lt;td&gt;139313&lt;/td&gt;
        &lt;td&gt;20726&lt;/td&gt;
        &lt;td&gt;-85.12&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td colspan="9"&gt;
        &lt;table class = "box"&gt;
          &lt;tr&gt;
            &lt;td colspan="5" style="background-color: #e84f32; padding:               8px; color:white; text-align:center"&gt;Organisation Wise                   Transaction Report On 05-Dec- 2021&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th&gt;Slno&lt;/th&gt;
            &lt;th&gt;Organisation&lt;/th&gt;
            &lt;th&gt;Registered Users&lt;/th&gt;
            &lt;th&gt;Present Today&lt;/th&gt;
            &lt;th&gt;Percent(%)&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;TSTSATTENDANCE&lt;/td&gt;
            &lt;td class="rightalign"&gt;294&lt;/td&gt;
            &lt;td class="rightalign"&gt;3&lt;/td&gt;
            &lt;td class="rightalign"&gt;1%&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;GVK&lt;/td&gt;
        &lt;td&gt;2 (0%)&lt;/td&gt;
        &lt;td&gt;1329&lt;/td&gt;
        &lt;td&gt;1329 (0)&lt;/td&gt;
        &lt;td&gt;681&lt;/td&gt;
        &lt;td&gt;686&lt;/td&gt;
        &lt;td&gt;0.73&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;SIL&lt;/td&gt;
        &lt;td&gt;33 (0%)&lt;/td&gt;
        &lt;td&gt;202240&lt;/td&gt;
        &lt;td&gt;203042 (0.4)&lt;/td&gt;
        &lt;td&gt;111348&lt;/td&gt;
        &lt;td&gt;7519&lt;/td&gt;
        &lt;td&gt;-93.25&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>