在 table 之后切换 table 行/切换按钮

Question

我正在尝试使用切换按钮隐藏和显示 HTML table 的某些行。我需要在 table 之后显示切换按钮，我只能在 table 之前显示按钮。我该如何定制这个？泰

/*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 class="tableToggle" 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>

Answer 1

只需剪切第一行并将其粘贴到 table 标记之后。
正确的 HTML 代码：

<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 class="tableToggle" for="cb1">Toggle Rows</label><input id="cb1" type="checkbox" checked="checked">

Answer 2

不客气！

.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 class="container">
    <label class="tableToggle" 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>

在 table 之后切换 table 行/切换按钮

Toggle table rows / Toggle Button after the table

html

css

html-table