用CSS2做折叠表行的方法？ [英] Way to make a folding table row with CSS2?

问题描述

有什么办法使折叠表行与CSS2？ （这也将在IE8上支持）？

我想显示一个表，前两行像平常一样可见，但下两行应该是隐藏 ，有某种类型的酒吧，当它被点击，他们将被显示为好。

任何方式这样做？

解决方案

在CSS2中实现有几个问题，即使我们忽略改变动画的问题（我将忽略它，因为它显然在CSS2的可能性之外）。在CSS中，一般来说，没有什么可以对点击作出反应。我们可以做的是在可聚焦元素上使用：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;颜色：蓝色背景：蓝色;显示：block; height：0.6em;}。hidden：focus：after {content：none;} table {border-collapse：collapse;} td {border：solid black 1px;}  
 < table>< tbody& < tr>< td>第一行< tr>< td>第二行< / tbody>< tbody class =hiddencontenteditable& < tr>< td>第三行< tr>< td>第四行< / tbody>< / table>   
 
Is there any way to make folding table rows with CSS2? (which would be supported on IE8 as well)?

I Want to display a table, first two rows visible as usual, but the next two rows should be "hidden", with some kind of a bar that when it gets clicked, they would be shown as well.

Any way to do this? couldn't find on google something for my specific needs.
解决方案
There are several problems with implementing that in CSS2 even if we ignore the issue of making the change animated (which I will ignore, as it is clearly outside the possibilities of CSS2). In CSS in general, there is nothing for reacting to a click as such. What we can do is to use :focus on a focusable element, since clicking will set focus. To set e.g. table rows focusable, you can make its content editable by the user (this should not harm, since such edits as such affect nothing but the copy of the page in the user’s browser).

The following code demonstrates the approach, but it has the non-CSS2 setting display: table-row. I’m afraid there is no pure CSS2 way, unless you want to make the rows initially invisible rather than hidden. (Being invisible, visibility: hidden, means that they still occupy space, the space is just empty.) However, this approach seems to work in IE 8 too (though I tested only in IE 11 using IE 8 emulation); it fails on IE 7 due to lack of support to generated content.


.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做折叠表行的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！