Способ сделать складной стол строки с CSS2?

Question

Есть ли способ сделать таблицы складных таблиц с CSS2? (который также будет поддерживаться на IE8)?

Я хочу отобразить таблицу, первые две строки, видимые как обычно, но следующие две строки должны быть «скрыты», с какой-то полосой, которая при нажатии будет показана.

Любой способ сделать это? не смог найти в Google что-то для моих конкретных потребностей.

Answer 1

Существует несколько проблем с реализацией этого в 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"; 
 
    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>