Question

有没有办法用CSS2制作折叠表行？（这也将在IE8上得到支持）？

我希望显示一个表格，前两行可以像往常一样显示，但接下来的两行应该是＆＃34;隐藏＆＃34;，带有某种条形，当它被点击时，它们将显示为好。

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

Answer 1

在CSS2中实现它有几个问题，即使我们忽略了使动画更改动画的问题（我将忽略它，因为它显然超出了CSS2的可能性）。在CSS中，一般来说，没有任何东西可以对点击作出反应。我们可以做的是在可聚焦元素上使用:focus，因为点击将设置焦点。设定例如table rows focusable，你可以让用户编辑它的内容（这不应该有害，因为这样的编辑只会影响用户浏览器中页面的副本）。

以下代码演示了该方法，但它具有非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>

用CSS2制作折叠桌排的方法？

1 个答案: