Checkbox inside a table row to toggle data by using CSS only-CodePudding

I have a table, where data is hidden or shown based on whether the checkbox is checked or unchecked. here is the fiddle : https://jsfiddle.net/2xw3tsrh/2/

I am trying to bring the checkbox inside 'td' , right infront of "Click me" text. I cannot use 'data-label' or, use an id for each row to traverse and use something "input#row1:checked". I dont want to hide the checkbox and tie the label text to the checkbox. Is there a way to achieve it ?

Thanks in advance.

Code :

body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  background: rgb(231, 207, 192);
  min-height: 100vh;
}

@charset "UTF-8";

/* #row1,#row2 {
                display: none;
            }  */

.tab-label {
  /* display: flex;
                justify-content: space-between;
                padding: 1em; */
  background: #b9ce44;
  font-weight: bold;
  /* cursor: pointer; */
  /* Icon */
}


/* .tab-label:hover {
                background: #1a252f;
            } */


/* .tab-label::after {
                content: "❯";
                width: 1em;
                height: 1em;
                text-align: center;
                transition: all 0.35s;
            } */

.tab-content {
  overflow: hidden;
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
}


/* input:checked ~ .tab-label {
                background: #1a252f;
            } */


/* input:checked ~ .tab-label::after {
                transform: rotate(90deg);

            } */

input:checked~.tab-content {
  max-height: 100vh;
  padding: 1em;
}

<div id="page-wrap" style="margin: 50px;background: cornflowerblue;">
  <h1 style="margin: 0;line-height: 3;text-align: center;font: 30px/1.4 Georgia, Serif;">Table</h1>
  <table role="presentation" style="width: 100%;border-collapse: collapse;">
    <thead>
      <tr>
        <th rowspan="2" colspan="1" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="1" colspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
      </tr>
      <tr>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>

      </tr>
    </thead>

    <tbody>
      <!-- Ist Row -->
      <tr>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">

          <label  for="row1"> (Bring checkbox here) Click Me</label>


        </td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
      </tr>
      <!-- Ist accordion -->
      <tr>
        <td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
          <input id="row1" type="checkbox">
          <div >
            <table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">

              <thead>
                <tr>
                  <th rowspan="2" colspan="1" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <!-- <th rowspan="1" colspan="4"
                                                style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                                Header</th> -->
                  <th rowspan="1" colspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>


                </tr>

                <tr>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <!-- <th rowspan="2"
                                                style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                                Header</th>
                                            <th rowspan="2"
                                                style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                                Header</th>
                                            <th rowspan="2"
                                                style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                                Header</th>
                                            <th rowspan="2"
                                                style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                                Header</th> -->
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>

                </tr>
              </thead>


              <tr>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <!-- <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">Athens</td>
                                        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
                                        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">Edlund, Ben
                                            (July 1996).</td>
                                        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td> -->
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <!-- 2nd Row -->
      <tr>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
          <label  for="row2">Click Me</label>
        </td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
      </tr>
      <!-- 2nd accordion -->
      <tr>
        <td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
          <input id="row2" type="checkbox">
          <div >
            <table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">

              <thead>
                <tr>
                  <th rowspan="2" colspan="1" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <!-- <th rowspan="1" colspan="4"
                                                style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                                Header</th> -->
                  <th rowspan="1" colspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>


                </tr>

                <tr>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>

                </tr>
              </thead>


              <tr>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>

              </tr>


            </table>
          </div>
        </td>
      </tr>




    </tbody>
  </table>

</div>

Update:

I also tried to take ispiration from here : Change checked html table row with CSS to move the "checkbox" right outside the row of first 'td' to achieve a similar functionality - that didnt work out as well as it messed up the table.

CodePudding user response：

As mentioned in the comments, you are limited with the table layout because you are using the sibling selector ~ to display your content when your input is :checked.

A possible solution would be to set the input's to display: none; so only the label's are clickable. Then you could use tabindex on your divs to apply a background-color on :focus when each .tab-content is open.

@charset "UTF-8";
.tab-label {
  font-weight: bold;
}

.tab-label:focus {
  background: #b9ce44;
}

.tab-content {
  overflow: hidden;
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
}

input:checked~.tab-content {
  max-height: 100vh;
  padding: 1em;
}

input#row1,
input#row2 {
  display: none;
}

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">

</html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Table</title>
  <!-- add icon link -->
  <link rel="icon" href="./MAblueIcon.png" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body style="margin: 0;padding: 0;min-width: 100%;width: 100%;
max-width: 100%; min-height: 100%; height: 100%;max-height: 100%;  background: rgb(231, 207, 192);
min-height: 100vh;">

  <div id="page-wrap" style="margin: 50px;background: cornflowerblue;">

    <h1 style="margin: 0;line-height: 3;text-align: center;font: 30px/1.4 Georgia, Serif;">Table</h1>

    <table role="presentation" style="width: 100%;border-collapse: collapse;">
      <thead>
        <tr>
          <th rowspan="2" colspan="1" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="1" colspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>


        </tr>

        <tr>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>
          <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
            Header</th>

        </tr>
      </thead>

      <tbody>
        <!-- Ist Row -->
        <tr>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">

            <label  for="row1" tabindex="0"> Expand Here</label>


          </td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        </tr>
        <!-- Ist accordion -->
        <tr>
          <td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
            <input id="row1" type="checkbox">
            <div >
              <table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">

                <thead>
                  <tr>
                    <th rowspan="2" colspan="1" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <!-- <th rowspan="1" colspan="4"
                                            style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                            Header</th> -->
                    <th rowspan="1" colspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>


                  </tr>

                  <tr>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <!-- <th rowspan="2"
                                            style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                            Header</th>
                                        <th rowspan="2"
                                            style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                            Header</th>
                                        <th rowspan="2"
                                            style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                            Header</th>
                                        <th rowspan="2"
                                            style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                            Header</th> -->
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>

                  </tr>
                </thead>


                <tr>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <!-- <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">Athens</td>
                                    <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
                                    <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">Edlund, Ben
                                        (July 1996).</td>
                                    <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td> -->
                </tr>


              </table>
            </div>
          </td>
        </tr>




        <!-- 2nd Row -->
        <tr>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">

            <label  for="row2" tabindex="0">Click Me</label>


          </td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
          <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        </tr>
        <!-- 2nd accordion -->
        <tr>
          <td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
            <input id="row2" type="checkbox">
            <div >
              <table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">

                <thead>
                  <tr>
                    <th rowspan="2" colspan="1" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <!-- <th rowspan="1" colspan="4"
                                            style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                                            Header</th> -->
                    <th rowspan="1" colspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>


                  </tr>

                  <tr>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>
                    <th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                      Header</th>

                  </tr>
                </thead>


                <tr>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>
                  <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                  </td>

                </tr>


              </table>
            </div>
          </td>
        </tr>




      </tbody>
    </table>

  </div>

</body>


</html>

CodePudding user response：

Disclaimer

This is only posted to serve as an answer that fully satisfies the request of OP. As of posting, this answer is not fully supported in all browsers and will not work everywhere.

CSS Combinators

The code provided by OP uses the general sibling selector ~ which allows the checkbox to apply CSS to a sibling element (any element which shares the same parent and is a direct sibling). OP would like to move the checkbox into a different element, which would make it no longer a sibling of the element needing the CSS.

- Parent 1
--- Child 1
- Parent 2
--- Child 2
--- Child 3

In this example hierarchy, Child 2 and Child 3 are the sibling elements. And so doing something to Child 2 (like changing the :checked status) can allow it to apply CSS to its sibling, Child 3.

However, if you move Child 2 to Parent 1, it will be a sibling of Child 1 and can no longer apply CSS to Child 3. CSS currently has no parent selectors, meaning you can only apply CSS to siblings and children/descendants.

CSS :has()

A more recent addition to CSS is the :has() selector. This ignores the document structure/hierarchy and allows CSS to simply check for a condition. Unfortunately :has() is not supported in all browsers (currently Chrome/Chrome-based and Safari are the only browsers with full support).

But if browser support is not a concern (though it always should be), you can use :has() to check if an element (tr in this case) has an input that is checked. If so, it will apply CSS to a sibling of the tr element (the next tr row, and then following the descendants of td and .tab-content, to prevent all hidden elements from showing).

@charset "UTF-8";

body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  background: rgb(231, 207, 192);
  min-height: 100vh;
}

.tab-label {
  /* display: flex;
  justify-content: space-between;
  padding: 1em; */
  background: #b9ce44;
  font-weight: bold;
  /* cursor: pointer; */
  /* Icon */
}

.tab-content {
  overflow: hidden;
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
}


tr:has(input:checked)   tr td .tab-content {
  max-height: 100vh;
  padding: 1em;
}

<div id="page-wrap" style="margin: 50px;background: cornflowerblue;">
  <h1 style="margin: 0;line-height: 3;text-align: center;font: 30px/1.4 Georgia, Serif;">Table</h1>
    <table role="presentation" style="width: 100%;border-collapse: collapse;">
    <thead>
      <tr>
        <th rowspan="2" colspan="1"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="1" colspan="4"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="1" colspan="4"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="1" colspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
      </tr>
      <tr>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
        <th rowspan="2"
          style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
          Header</th>
      </tr>
  </thead>
    <tbody>
      <!-- Ist Row -->
      <tr>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
          <input id="row1" type="checkbox">
          <label  for="row1">(Bring checkbox here) Click Me</label>
        </td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
      </tr>
      <!-- Ist accordion -->
      <tr>
        <td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
          <div >
            <table role="presentation"
              style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
              <thead>
                <tr>
                  <th rowspan="2" colspan="1"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="1" colspan="4"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <!-- <th rowspan="1" colspan="4"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th> -->
                  <th rowspan="1" colspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                </tr>
                <tr>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <!-- <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th> -->
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                </tr>
              </thead>
              <tr>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <!-- <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">Athens</td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">Edlund, Ben
                  (July 1996).</td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td> -->
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <!-- 2nd Row -->
      <tr>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
          <input id="row2" type="checkbox">
          <label  for="row2">Click Me</label>
        </td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
      </tr>
      <!-- 2nd accordion -->
      <tr>
        <td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
          <div >
            <table role="presentation"
              style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
              <thead>
                <tr>
                  <th rowspan="2" colspan="1"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="1" colspan="4"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <!-- <th rowspan="1" colspan="4"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th> -->
                  <th rowspan="1" colspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                </tr>
                <tr>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                  <th rowspan="2"
                    style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
                    Header</th>
                </tr>
              </thead>
              <tr>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
                <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
                </td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

THIS IS A FAKE OUT - this toggles checkboxes that are in the table cell depending on the hidden checkbox way up top. The <label around the cell contents allows the checks for="row1

I removed a lot of style from the table and moved it to the CSS where it should be anyway to make it visually easier to see the markup without that "noise".

I left the second one (now broken with the CSS changes) in place for your efforts.

body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  background: rgb(231, 207, 192);
  min-height: 100vh;
}

@charset "UTF-8";
.tab-label {
  background: #b9ce44;
  font-weight: bold;
}

.tab-content {
  overflow: hidden;
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
}

.checker.on-check,
.checker.off-check {
  border: solid 2px green;
  width: 1em;
  height: 1em;
  background-color: white;
}


/* hides the checkbox way up at the top, won't sumbit if in a form */

.hidden-toggler {
  display: none;
}


/* just to show the table that is the sibling - visual cue only */

.hidden-toggler .toggler-sibling {
  border: solid red 2px;
}


/* this deals with the two checkboxes in the cell visibility dependance */

.hidden-toggler:not(:checked) .toggler-sibling .checker.on-check,
.hidden-toggler:checked .toggler-sibling .checker.off-check {
  display: none;
}


/* hides the checkbox way up at the top */

.hidden-toggler {
  display: none;
}

.hidden-toggler:checked .toggler-sibling .row-1-target .tab-content {
  max-height: 100vh;
  padding: 1em;
}


/* prevents the checkboxes IN the cell from being clickable */

.checker {
  pointer-events: none;
}


/* HTML noise reducers */

.header-text {
  background: #333;
  color: white;
  font-weight: bold;
  padding: 6px;
  border: 1px solid #ccc;
  text-align: center;
}

.na-text {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: center;
}

<div id="page-wrap" style="margin: 50px;background: cornflowerblue;">
  <h1 style="margin: 0;line-height: 3;text-align: center;font: 30px/1.4 Georgia, Serif;">Table</h1>

  <input id="row1" type="checkbox" >
  <table  role="presentation" style="width: 100%;border-collapse: collapse;">
    <thead>
      <tr>
        <th rowspan="2" colspan="1" >Header</th>
        <th rowspan="1" colspan="4" >Header</th>
        <th rowspan="1" colspan="4" >Header</th>
        <th rowspan="1" colspan="2" >Header</th>
      </tr>
      <tr>
        <th rowspan="2" >Header</th>
        <th rowspan="2" >Header</th>
        <th rowspan="2" >Header</th>
        <th rowspan="2" >Header</th>
        <th rowspan="2" >Header</th>
        <th rowspan="2" >Header</th>
        <th rowspan="2" >Header</th>
        <th rowspan="2" >Header</th>
        <th rowspan="2" >Header</th>
        <th rowspan="2" >Header</th>
      </tr>
    </thead>
    <tbody>
      <!-- Ist Row -->
      <tr>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
          <span >
             <label  for="row1"><span ><input type="checkbox" checked></span>
          <span ><input type="checkbox"></span> Click Me</label>
          </span>
        </td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
      </tr>
      <!-- Ist accordion -->
      <tr >
        <td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">

          <div >
            <table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
              <thead>
                <tr>
                  <th rowspan="2" colspan="1" >Header</th>
                  <th rowspan="1" colspan="4" >Header</th>
                  <th rowspan="1" colspan="2" >Header</th>
                </tr>
                <tr>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                </tr>
              </thead>
              <tr>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <!-- 2nd Row -->
      <tr>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
          <label  for="row2">Click Me</label>
        </td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
        <td >N/A</td>
      </tr>
      <!-- 2nd accordion -->
      <tr>
        <td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
          <input id="row2" type="checkbox">
          <div >
            <table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
              <thead>
                <tr>
                  <th rowspan="2" colspan="1" >Header</th>
                  <th rowspan="1" colspan="4" >Header</th>
                  <th rowspan="1" colspan="2" >Header</th>
                </tr>
                <tr>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                  <th rowspan="2" >Header</th>
                </tr>
              </thead>
              <tr>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
                <td >N/A</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>