Way to make a folding table row with CSS2?

怎甘沉沦 提交于 2019-12-13 04:44:32

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!