Как сделать сворачиваемую таблицу?

Question

[Илья Деревянных]

Как сделать такую таблицу?

Comments

[ReActor Дмитрий Вершанский]

Приветствую.
Что именно Вы вкладываете в понятие - "сворачиваемости" таблицы?

[Илья Деревянных]

Как на странице на которую ссылку указал.

Answer 1

[twobomb]

Answer 2

[scottparker]

я бы попробовал, сделать блок-обертку для таблицы, задать ему высоту меньше высоты таблицы и overflow: hidden (скрыть все что выходит за границы блока). при нажатии на таблицу увеличивать высоту блока-обертки до высоты таблицы

Answer 3

[Rsa97]

Примерно так, только ещё рюшечек навесить - полупрозрачный градиент, плавное сворачивание и т.д.

Answer 4

[Андрей Пике]

Илья, крайне рекомендую немного поменять философию и перейти на отступы с пробелами.
Любые современные редакторы это понимают..
В JS/CSS это два, в Питоне 4, в HTML или то, или другое.
А тут они настроены на 8.
Ваш код нечитаем.

Comments

[Андрей Пике]

Градиент наложен на таблицу когда она свёрнута через :after.

background-image: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0) 100%);

И ограничение по высоте.

overflow: hidden;
height: 300px;

При раскрытии эти условия снимаются.

Answer 5

[Игорь]

Нажать F12 и посмотреть как сделано раз у вас есть уже работающий вариант.