CSS 只有 Accordion Table 无法正确切换

Question

我有一个 table，我只使用 CSS（没有 jQuery）创建了类似手风琴的效果。手风琴效果有效，但只有当我点击复选框时它才有效，如 fiddle:

（我故意没有隐藏 fiddle 中的复选框，这样任何人都可以测试它）。

如您在代码中所见，我嵌套了 table。如果单击原始行：

<tr for="row1">
   <td class="closed">+</td>
   <td>123</td>
   <td>John</td>
   <td>Doe</td>
   <td>02-15-1982</td>
  <td>M</td>
</tr>

您会在该行下方得到其他 table 的 class 名称 employee-info，就像手风琴一样。

我能够让 row2 像手风琴一样折叠和工作的唯一方法是将它变成一个单独的 table 并给 table 一个与原来相同的名字一：

<table class="table-bordered table-responsive employee accordion-row" for="row2">

否则，即使我将for="row2放在<tr>元素中，手风琴效果也不会起作用。因此，该行的样式与原始 table 不一致。要切换该行 (row2)，我只能通过选中第二个复选框而不是按预期单击加号 (+) 来获取它。

我的问题是，如何通过单击原始 table 中的行来切换这些组件，而不必每次都单击复选框？

Answer 1

Note: This can be done with CSS, but should be done with javascript. This is a fun experiment, which works, but it is not recommended for production use.

重新排列 HTML，使下拉列表 table 位于其自己的行中，并使用其单个单元格 colspan 属性跨越所有列：
```
<tr><td colspan="6"><table></table></td></tr>
```
将复选框输入放在嵌套 table 之前。它可以通过放置在每行第一个单元格中的标签来触发，如下所示：
```
<td><label for="row1"></label>123</td> 
```
我们可以通过绝对定位和一些 z-index 将标签放置在整行上：
```
label {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 1000px;
   z-index: 2;
}
```
宽度必须足够宽以覆盖整行。它相对于其父 td 定位，并在 table.
上用 overflow: hidden 切断
现在整行都可以点击了：

例子

在 IE 中，边框有点乱。这需要一些调整。

table {
  border-collapse: collapse;
  overflow: hidden;
}
table table {
  display: none;
  margin: 10px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked + table {
  display: table;
  width: calc(100% - 20px);
}
label {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1000px;
  z-index: 2;
}
label:hover {
  background: rgba(255, 255, 0, 0.2);
}
table > tbody > tr:nth-child(2n) > td {
  padding: 0;
}
table > tbody > tr:nth-child(2n) > td td {
  padding: 5px;
}
th,
td {
  border: solid 1px #000;
  text-align: left;
  padding: 5px;
  position: relative;
}

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>DOB</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label for="row1"></label>
        123
      </td>
      <td>John</td>
      <td>Doe</td>
      <td>02-15-1982</td>
      <td>M</td>
    </tr>
    <tr>
      <td colspan="6">
        <input id="row1" type="checkbox">
        <table>
          <tr>
            <th>Phone Number</th>
            <td>555-3226</td>
            <th>City:</th>
            <td>New York</td>
          </tr>
          <tr>
            <th>Hire Date:</th>
            <td>8/13/12</td>
            <th>Salary:</th>
            <td>,000</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <label for="row2"></label>
        123
      </td>
      <td>John</td>
      <td>Doe</td>
      <td>02-15-1982</td>
      <td>M</td>
    </tr>
    <tr>
      <td colspan="6">
        <input id="row2" type="checkbox">
        <table>
          <tr>
            <th>Phone Number</th>
            <td>555-3226</td>
            <th>City:</th>
            <td>New York</td>
          </tr>
          <tr>
            <th>Hire Date:</th>
            <td>8/13/12</td>
            <th>Salary:</th>
            <td>,000</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

CSS 只有 Accordion Table 无法正确切换

CSS Only Accordion Table won't toggle properly

html

css

html-table

css-transitions

例子