Задача. Есть длинная таблица и нужно сделать, чтобы часть таблицы скрывалась и раскрывалась по клику (см. Пример №1).
Раскрыть / Скрыть таблицу на CSS
Решение 1. Настроить скрытие лишних строк в таблице возможно использовав только средствами CSS и HTML. Код №1 из Примера №1:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<style> .my-table { width: 100%; border-collapse: collapse; } .my-table tbody td, .my-table thead th { border: 1px solid #646a6e; padding: 2px 5px; } .my-table thead tr th { background: #00a140; text-align: center; } .wrap-expand-table a[href^="#click-expand"], .wrap-expand-table a[href="#close"] { text-decoration: none; border-bottom: 1px dashed; } /* Если браузер не поддерживает структурные псевдоклассы, то список будет раскрыт и доступ к данным сохранится */ [id^="click-expand"] { position: fixed; /* чтобы страница "не подпрыгивала" к id */ } [id^="click-expand"]:target + .wrap-expand-table a[href^="#click-expand"], [id^="click-expand"]:not(:target) + .wrap-expand-table tbody tr:nth-of-type(n+5), /* 5 — порядковый номер строки, после которой строки будут скрыты */ [id^="click-expand"]:not(:target) + .wrap-expand-table a[href="#close"] { display: none; } </style> <div id="click-expand1"/></div> <div class="wrap-expand-table"><a href="#close">Свернуть</a><a href="#click-expand1">Развернуть</a> <table class="my-table"> <thead> <tr> <th>Столбец 1</th> <th>Столбец 2</th> <th>Столбец 3</th> </tr> </thead> <tbody> <tr> <td>Строка 1</td> <td>Ячейка 1.1</td> <td>Ячейка 1.2</td> </tr> <!-- <tr.... --> <tr> <td>Строка 8</td> <td>Ячейка 8.1</td> <td>Ячейка 8.2</td> </tr> </tbody> </table> <a href="#close">Cвернуть</a><a href="#click-expand1">Посмотреть весь список</a> </div> |
Поянения к Коду №1:
1 — Таблиц может быть любое количество, нужно только менять id click-expand1 на click-expand2 или click-expand40
2 — Если браузер не поддерживает структурные псевдоклассы, то список будет раскрыт и доступ к данным сохранится
[id^="click-expand"]:not(:target) + .wrap-expand-table tbody tr:nth-of-type(n+5) — порядковый номер строки — 5, после которой остальные строки будут скрыты