Question

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

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

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

<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中，边框有点混乱。这需要进行一些调整。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS Only Accordion Table不能正确切换

1 个答案:

实施例