Toggle table rows / Toggle Button after the table-CodePudding

I am trying to hide and show some rows of my HTML table with a toggle button. I need to display the toggle button after the table, I only could display the button before my table. How can I custom this ? Ty

/*Use CSS to hide the rows of the table that is next to check box that is next to an element with a class of tableToggle*/
.tableToggle   input[type="checkbox"]:checked   table>tbody>tr:nth-child(n 2) {
  display: none;
}

/*Hide the checkbox*/
.tableToggle   input[type="checkbox"] {display:none;}

/*Button Styling only -- noting important here*/
.tableToggle{
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;  
    padding:5px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}

<label  for="cb1">Toggle Rows</label><input id="cb1" type="checkbox" checked="checked">
<table>
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>R1 C1</td>
      <td>R1 C2</td>
      <td>R1 C3</td>
    </tr>
    <tr>
      <td>R2 C1</td>
      <td>R2 C2</td>
      <td>R2 C3</td>
    </tr>
    <tr>
      <td>R3 C1</td>
      <td>R3 C2</td>
      <td>R3 C3</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

You are welcome!

.container {
      display: flex;
      flex-direction: column-reverse;
    }

    table {
      display: block;
    }

    /*Use CSS to hide the rows of the table that is next to check box that is next to an element with a class of tableToggle*/
    .tableToggle input[type="checkbox"]:checked table>tbody>tr:nth-child(n 2) {
      display: none;
    }

    /*Hide the checkbox*/
    .tableToggle input[type="checkbox"] {
      display: none;
    }

    /*Button Styling only -- noting important here*/
    .tableToggle {
      background-color: #44c767;
      -moz-border-radius: 28px;
      -webkit-border-radius: 28px;
      border-radius: 28px;
      border: 1px solid #18ab29;
      display: inline-block;
      cursor: pointer;
      color: #ffffff;
      font-family: Arial;
      padding: 5px;
      text-decoration: none;
      text-shadow: 0px 1px 0px #2f6627;
    }

<div >
    <label  for="cb1">Toggle Rows</label><input id="cb1" type="checkbox" checked="checked">
    <table>
      <thead>
        <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>R1 C1</td>
          <td>R1 C2</td>
          <td>R1 C3</td>
        </tr>
        <tr>
          <td>R2 C1</td>
          <td>R2 C2</td>
          <td>R2 C3</td>
        </tr>
        <tr>
          <td>R3 C1</td>
          <td>R3 C2</td>
          <td>R3 C3</td>
        </tr>
      </tbody>
    </table>
  </div>

CodePudding user response：

just cut first line and paste it after table tag.
correct HTML code:

<table>
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>R1 C1</td>
      <td>R1 C2</td>
      <td>R1 C3</td>
    </tr>
    <tr>
      <td>R2 C1</td>
      <td>R2 C2</td>
      <td>R2 C3</td>
    </tr>
    <tr>
      <td>R3 C1</td>
      <td>R3 C2</td>
      <td>R3 C3</td>
    </tr>
  </tbody>
</table>
<label  for="cb1">Toggle Rows</label><input id="cb1" type="checkbox" checked="checked">