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

Question

有没有办法用CSS2制作折叠表格行？ (IE8 也支持哪些)？

我想显示一个表格，前两行像往常一样可见，但接下来的两行应该是“隐藏的”，带有某种栏，当它被点击时，它们也会显示。

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

Answer 1

即使我们忽略动画更改的问题(我将忽略它，因为它显然超出了 CSS2 的可能性)，在 CSS2 中实现它也有几个问题。一般来说，在 CSS 中，没有什么可以对点击使用react。我们可以做的是在可聚焦元素上使用 :focus，因为单击会设置焦点。设置例如表格行可聚焦，您可以使其内容可由用户编辑(这应该不会造成伤害，因为此类编辑只会影响用户浏览器中页面的副本)。

以下代码演示了该方法，但它具有非 CSS2 设置 display: table-row。恐怕没有纯 CSS2 方式，除非您想让行最初不可见而不是隐藏。 (不可见，visibility: hidden，意味着它们仍然占据空间，空间只是空的。)但是，这种方法似乎也适用于 IE 8(尽管我仅在 IE 11 中使用 IE 进行了测试8 仿真)；由于缺乏对生成内容的支持，它在 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>