Way to make a folding table row with CSS2?

Question

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.

Have you tried bootstrap 3? I think that could help + some jQuery — Florin Pop, Sep 19 '14 at 12:41
Are there any restrictions or wishes to your request, or just "it should work"? And if you could, show some code of what you have tried. — Sander Koedood, Sep 19 '14 at 12:42
@Flopet17 See http://www.doxdesk.com/img/updates/20091116-so-large.gif and http://meta.stackexchange.com/questions/45176/when-is-use-jquery-not-a-valid-answer-to-a-javascript-question — Ruan Mendes, Sep 19 '14 at 12:42
CSS only? Or Javascript is OK? I have never heard of reacting to a click in CSS — Ruan Mendes, Sep 19 '14 at 12:46
CSS transitions are css3 and will only work in modern browsers, you will need the help of js to make these work in older browsers — Pete, Sep 19 '14 at 12:48
Would you be ok with something like [this](http://jsfiddle.net/8o90ua12/1/). It is purely CSS but have not added any transitions. I am not sure if you are looking specifically for a *folding* effect or just a simple hide/show. — Harry, Sep 19 '14 at 12:50
@JuanMendes: The question title is making me wait mate. I am not sure if OP is looking for a visual folding effect. That wouldn't be possible with just CSS in IE8. — Harry, Sep 19 '14 at 12:54
@JuanMendes: Actually I made a big blunder, `:checked` and `nth-child` are both CSS3 standard and hence that technically doesn't answer the question. But I will let it stay in the comments. — Harry, Sep 19 '14 at 13:01
Thanks, I guess javascript would be needed then as yous say, [I've started a new question] (http://stackoverflow.com/questions/25938073/how-to-to-make-collapsing-table-rows-with-ie8-support-also) — rockyraw, Sep 19 '14 at 16:05

Jukka K. Korpela · Answer 1 · 2014-09-19T13:18:10.803

3

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>

edited Sep 19 '14 at 13:18

answered Sep 19 '14 at 13:09

Jukka K. Korpela

195,524
37
270
390

Alternatively, an element can be targeted by `:focus` if it has a `tabindex` property/value. And also instead of altering the `display` type we can use [`visibility: collapse`](http://stackoverflow.com/questions/25807564/hiding-a-tr-while-still-involving-it-in-width-calculations/25807729#25807729) declaration. – Hashem Qolami Sep 19 '14 at 13:30
That's the first live code snippet I see on Stack, yay! Is there another way besides contenteditable? It does have a major side effect, +1 anyway – Ruan Mendes Sep 19 '14 at 13:50
Thanks, though I can't let users edit the table, [I've started a new question.] (http://stackoverflow.com/questions/25938073/how-to-to-make-collapsing-table-rows-with-ie8-support-also) – rockyraw Sep 19 '14 at 16:06
@rockyraw, I don’t see the problem with editing the table (anyone who really wants to do that as a user can do it, one way or another), but as mentioned in comments, `tabindex` will make an element focusable without making it editable. And another comment says that `visibility: collapse` can be used, so apparently there *is* a CSS2 solution. If you were prepared to accepting JavaScript solutions too, then could have formulated the initial question that way. – Jukka K. Korpela Sep 19 '14 at 17:22
@JukkaK.Korpela ok, is it possible though to have something more design flexible than that blue clickable element? what if I want something that looks like a text link, that would be inside the visible row, and once clicked, it would show up the rest? – rockyraw Sep 19 '14 at 17:50
@rockyraw, the blue bar was just an example; the question says “some kind of a bar”. You can of course put real text there, and it can up to some point be styled to look like a text link. Putting it inside a visible row would require something different, but I can’t see the point with that, and the question rather clearly suggests that the bar appears below the visible rows. – Jukka K. Korpela Sep 19 '14 at 17:55

Way to make a folding table row with CSS2?

1 Answers1

Linked