css - 用CSS2制作折叠表行的方法？

有什么方法可以使用CSS2折叠表格行？ （IE8也将支持该功能）？

我想显示一个表，与往常一样可见的前两行，但接下来的两行应“隐藏”，并带有某种条形，单击该条也将显示它们。

有什么办法吗？在Google上找不到满足我特定需求的东西。

最佳答案

即使我们忽略使更改变为动画的问题（在CSS2的可能性之外，我也将忽略），在CSS2中实现该问题仍然存在一些问题。通常，在CSS中，没有什么可以对点击产生反应的。我们可以做的是在可聚焦元素上使用:focus，因为单击将设置焦点。设置例如您可以将表格中的行设置为可聚焦，则用户可以对其内容进行编辑（这不会造成危害，因为这样的编辑只会影响用户浏览器中页面的复制，因此不会产生任何影响）。

以下代码演示了该方法，但是它具有非CSS2设置display: table-row。除非您想使行最初不可见而不是隐藏，否则恐怕没有纯粹的CSS2方法。 （visibility: hidden是不可见的，表示它们仍然占据空间，空间只是空的。）但是，这种方法似乎也可以在IE 8中使用（尽管我仅使用IE 8仿真在IE 11中进行了测试）；由于缺少对生成内容的支持，因此在IE 7上失败。

.hidden tr {
  display: none;
}
.hidden:focus tr {
  display: table-row;
}
.hidden:focus {
  outline: none;
}
.hidden:after {
  content: "\a0";
  color: blue;
  background: blue;
  display: block;
  height: 0.6em;
}
.hidden:focus:after {
  content: none;
}
table {
  border-collapse: collapse;
}
td {
  border: solid black 1px;
}

<table>
<tbody>
  <tr><td>First row
  <tr><td>Second row
</tbody>
<tbody class="hidden" contenteditable>
  <tr><td>Third row
  <tr><td>Fourth row
</tbody>
</table>

关于css - 用CSS2制作折叠表行的方法？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25934163/