问题
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.
回答1:
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>
来源:https://stackoverflow.com/questions/25934163/way-to-make-a-folding-table-row-with-css2