Главная » Программирование » Раскрывающаяся HTML-таблица по клику

Раскрывающаяся HTML-таблица по клику

Задача. Есть длинная таблица и нужно сделать, чтобы часть таблицы скрывалась и раскрывалась по клику (см. Пример №1).

СвернутьРазвернуть
Столбец 1Столбец 2Столбец 3
Строка 1Ячейка 1.1Ячейка 1.2
Строка 2Ячейка 2.1Ячейка 2.2
Строка 3Ячейка 3.1Ячейка 3.2
Строка 4Ячейка 4.1Ячейка 4.2
Строка 5Ячейка 5.1Ячейка 5.2
Строка 6Ячейка 6.1Ячейка 6.2
Строка 7Ячейка 7.1Ячейка 7.2
Строка 8Ячейка 8.1Ячейка 8.2
CвернутьПосмотреть весь список
Пример №1: Раскрывающаяся HTML-таблица на CSS

Раскрыть / Скрыть таблицу на CSS

Решение 1. Настроить скрытие лишних строк в таблице возможно использовав только средствами CSS и HTML. Код №1 из Примера №1:

Код 1: Скрытие / Раскрытие HTML-таблицы по клику на CSS
Поянения к Коду №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, после которой остальные строки будут скрыты

5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

5 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Дмитрий
Дмитрий
1 год назад

Код из примера не работает.

Дмитрий
Дмитрий
1 год назад
Ответить на  WpCraft

Так…, опытным путём выяснил, что код конфликтует с js плавной прокрутки к якорям. Код брал из этого ответа: https://qna.habr.com/answer?answer_id=791294#answers_list_answer
Как совместить?

p.s.: примите обратную связь по UI этого сайта:
1) поля формы комментариев не удобная — не запоминает имя и почту, нет галки для сохранения в кукисах
2) При переключении на светлую тему текст в полях вообще не виден(

Дмитрий
Дмитрий
1 год назад
Ответить на  WpCraft

scroll-behavior у меня не работает, не знаю почему, уже многое перепробовал и перечитал, не нашел из-за чего так происходит.
Поэтому юзаю jquery.

В итоге для таблицы пользую это решение:
https://wpcraft.top/kak-skryt-chast-teksta-pod-katom-i-razvernut-svernut-po-knopke-na-html-i-css/

Спасибо за помощь и полезные статьи!)