Задача. Есть длинная таблица и нужно сделать, чтобы часть таблицы скрывалась и раскрывалась по клику (см. Пример №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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<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> <td>Строка 2</td> <td>Ячейка 2.1</td> <td>Ячейка 2.2</td> </tr> <tr> <td>Строка 3</td> <td>Ячейка 3.1</td> <td>Ячейка 3.2</td> </tr> <tr> <td>Строка 4</td> <td>Ячейка 4.1</td> <td>Ячейка 4.2</td> </tr> <tr> <td>Строка 5</td> <td>Ячейка 5.1</td> <td>Ячейка 5.2</td> </tr> <tr> <td>Строка 6</td> <td>Ячейка 6.1</td> <td>Ячейка 6.2</td> </tr> <tr> <td>Строка 7</td> <td>Ячейка 7.1</td> <td>Ячейка 7.2</td> </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, после которой остальные строки будут скрыты
Код из примера не работает.
Я только что скопировал Код 1, создал и вставил в HTML-документ. Всё работает.
Сам пример таблицы выше, над кодом https://i.imgur.com/IOskKGu.png у вас же работает?
Так…, опытным путём выяснил, что код конфликтует с js плавной прокрутки к якорям. Код брал из этого ответа: https://qna.habr.com/answer?answer_id=791294#answers_list_answer
Как совместить?
p.s.: примите обратную связь по UI этого сайта:
1) поля формы комментариев не удобная — не запоминает имя и почту, нет галки для сохранения в кукисах
2) При переключении на светлую тему текст в полях вообще не виден(
Из кода по вашей ссылке, честно, говоря, не знаю как решить. Думаю тут или использовать какое-то другое решение для скрытия строк таблицы либо не использовать скрипт плавной прокрутки. Этот скрипт применяется ко всем атрибутам href у которых есть «#».
Как вариант, предложил бы использовать для плавной прокрутки, вместо jquery, css-свойство «scroll-behavior» так:
html {scroll-behavior: smooth;}
На этом сайте с помощь этого свойства кнопка «на верх» (в правом нижнем углу) реализована https://wpcraft.top/prokrutka-vverh-na-html-i-css/
p.s. Спасибо за замечания. Учту.
scroll-behavior у меня не работает, не знаю почему, уже многое перепробовал и перечитал, не нашел из-за чего так происходит.
Поэтому юзаю jquery.
В итоге для таблицы пользую это решение:
https://wpcraft.top/kak-skryt-chast-teksta-pod-katom-i-razvernut-svernut-po-knopke-na-html-i-css/
Спасибо за помощь и полезные статьи!)