Попытка реализовать свертываемые/расширяемые строки в таблице, используя только HTML и CSS. ⇐ Html

[Anonymous]

Я прошел руководство, в котором показано, как создавать расширяемый/сворачиваемый контент, и мне удалось заставить его работать идеально; однако у меня возникли проблемы с адаптацией его для работы в таблице, где есть скрытые строки, которые можно расширить. Идея состоит в том, что вы нажимаете кнопку видео, и скрытая строка расширяется, показывая встроенное видео. Прямо сейчас он просто не будет расширять содержимое, даже если флажок установлен. Вот упрощенная версия моего кода:



th {padding: 5px;
border-bottom: 1px solid white; }



table {
width: 100%;
border-left: none;
border-right: none;
border-collapse: collapse; }



.accordion > input[name="collapse"] {
display:none; }



.accordion .content {
background: rgba(105, 45, 118, 0.9);
visibility:collapse; }



.accordion label {
color: #fff;
cursor: pointer;
font-weight: normal;
padding: 5px;
width:auto;
display:block; }



.accordion label:hover,
.accordion label:focus {
background: #FFFFFF;
color: #000000; }



.accordion table tr > input[name="collapse"]:checked ~ .content {
visibility:visible; }






Place
Player
Platform
Time
Video



1
Me
EMU
8:50
Video






https://www.youtube.com/embed/Yx21y2jcB9Q









Подробнее здесь: https://stackoverflow.com/questions/720 ... html-and-c