0

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 class="tab-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 class="tab-content">
            <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 class="tab-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 class="tab-content">
            <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.

Improve this question
9
  • U can use javascript to achieve this Commented Sep 21, 2022 at 13:31
  • My requiremnt is to use HTML CSS only. cant use javascript. Thanks for responding anyways. Commented Sep 21, 2022 at 13:33
  • 1
    With just HTML/CSS, the short answer is no. It currently works because it is using the sibling selector ~ in CSS to apply CSS to a sibling element to that checkbox. If you move the checkbox somewhere else, there is no way to select the element containing the data. The element containing the data would essentially need to be a child or sibling of the checkbox. Commented Sep 21, 2022 at 13:39
  • 2
    @jane In your example of the checkbox being moved where it is moved is very important here. In this example, the checkbox is a sibling to the <div> containing the table and the data, so a sibling selector ~ with descendant selectors to traverse the table structure will work. Per your question, putting it beside the label does not allow the checkbox and the data to be siblings in any way as they do not share a parent or descendants. Commented Sep 21, 2022 at 13:56
  • 1
    Given your example; CSS only and no JavaScript this is not currently possible. Using your "clearly possible" reference that same technique COULD be leveraged to make it LOOK LIKE the checkbox is indeed "IN" the table when it actually is NOT but that is not in line with your specific question. Commented Sep 21, 2022 at 19:58

3 Answers 3

Reset to default
2

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 class="tab-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 class="tab-content">
              <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 class="tab-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 class="tab-content">
              <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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the inputs. The idea is to bring the "checkbox" inside 'td'. I dont want to hide the 'checkbox' and link the checkbox to a label text.
1

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" class="hidden-toggler">
  <table class="toggler-sibling" role="presentation" style="width: 100%;border-collapse: collapse;">
    <thead>
      <tr>
        <th rowspan="2" colspan="1" class="header-text">Header</th>
        <th rowspan="1" colspan="4" class="header-text">Header</th>
        <th rowspan="1" colspan="4" class="header-text">Header</th>
        <th rowspan="1" colspan="2" class="header-text">Header</th>
      </tr>
      <tr>
        <th rowspan="2" class="header-text">Header</th>
        <th rowspan="2" class="header-text">Header</th>
        <th rowspan="2" class="header-text">Header</th>
        <th rowspan="2" class="header-text">Header</th>
        <th rowspan="2" class="header-text">Header</th>
        <th rowspan="2" class="header-text">Header</th>
        <th rowspan="2" class="header-text">Header</th>
        <th rowspan="2" class="header-text">Header</th>
        <th rowspan="2" class="header-text">Header</th>
        <th rowspan="2" class="header-text">Header</th>
      </tr>
    </thead>
    <tbody>
      <!-- Ist Row -->
      <tr>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
          <span class="check-container">
             <label class="tab-label" for="row1"><span class="checker on-check"><input type="checkbox" checked></span>
          <span class="checker off-check"><input type="checkbox"></span> Click Me</label>
          </span>
        </td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
      </tr>
      <!-- Ist accordion -->
      <tr class="row-1-target">
        <td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">

          <div class="tab-content">
            <table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
              <thead>
                <tr>
                  <th rowspan="2" colspan="1" class="header-text">Header</th>
                  <th rowspan="1" colspan="4" class="header-text">Header</th>
                  <th rowspan="1" colspan="2" class="header-text">Header</th>
                </tr>
                <tr>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                </tr>
              </thead>
              <tr>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <!-- 2nd Row -->
      <tr>
        <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
          <label class="tab-label" for="row2">Click Me</label>
        </td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">N/A</td>
        <td class="na-text">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 class="tab-content">
            <table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
              <thead>
                <tr>
                  <th rowspan="2" colspan="1" class="header-text">Header</th>
                  <th rowspan="1" colspan="4" class="header-text">Header</th>
                  <th rowspan="1" colspan="2" class="header-text">Header</th>
                </tr>
                <tr>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                  <th rowspan="2" class="header-text">Header</th>
                </tr>
              </thead>
              <tr>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
                <td class="na-text">N/A</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Improve this answer

3 Comments

what a genuis solution !! the only problem is that many older browsers dont support id/for to link between label and input. I tried to traverse to the hidden data using the classes, but I am not able to display the hidden data. here is the fiddle : jsfiddle.net/jak3ybg6 . I am also thinking to move the checkbox to right outside the table row, "clcik Me" using a new table and column just for the checkbox and then hide the border of the new table with checkbox. What does your experience say ?
Use JavaScript for this would be my solution. Frankly I would not do this with tables at all if you cannot use JavaScript since your desired visual requirement is difficult with tables. Any browsers that do not support the for= attribute on a <label> I would not care about since it is likely they are an unsecure browser. developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/…
For example IE is a challenge for some applications as a requirement but IE is DEAD. Internet Explorer 11 has retired as of June 15, 2022
1

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 class="tab-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 class="tab-content">
            <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 class="tab-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 class="tab-content">
            <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>

Improve this answer

1 Comment

Many thanks for the detailed explaination. The only problem with the solution is the browser compatibility. Thanks again for info on :has() selector.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.