CSS Only Accordion Table 无法正确切换

Question

我有一个表，我只使用 CSS（没有 jQuery）在其上创建了类似手风琴的效果。手风琴效果是有效的，但是只有当我点击这个小提琴上看到的复选框时它才有效：

https://jsfiddle.net/55nk6s4q/

（我故意没有隐藏小提琴中的复选框，以便任何人都可以测试它）。

正如您在代码中看到的，我有嵌套表。如果点击原始行：

<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>

您会在该行下方获得类名称为 employee-info 的其他表，就像手风琴一样。

我能够让row2 崩溃并像手风琴一样工作的唯一方法是把它做成一个单独的表格，并给表格赋予与原始表格相同的名称：

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

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

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

Answer 1

注意：这可以用 CSS 完成，但应该用 javascript 完成。这是一个有趣的实验，可行，但不建议用于生产。

• 重新排列 HTML，使下拉表位于其自己的行中，跨越所有列及其单个单元格 colspan 属性：

  <tr><td colspan="6"><table></table></td></tr>
  

• 将复选框输入放在嵌套表格之前。它可以通过放置在每行第一个单元格中的标签来触发，如下所示：

  <td><label for="row1"></label>123</td> 
  

• 我们可以使用绝对定位和一些 z-index 将标签放置在整行上：

  label {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     width: 1000px;
     z-index: 2;
  }
  

  宽度必须足够宽，以便覆盖整行。它相对于其父 td 定位，并与桌子上的 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>$48,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>$48,000</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>