Выпадающая таблица html css

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

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

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

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

/* Если браузер не поддерживает структурные псевдоклассы, то список будет раскрыт и доступ к данным сохранится */

[id^=»click-expand»]:not(:target) + .wrap-expand-table tbody tr:nth-of-type(n+5), /* 5 — порядковый номер строки, после которой строки будут скрыты */

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, после которой остальные строки будут скрыты

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

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

Я только что скопировал Код 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» так:

На этом сайте с помощь этого свойства кнопка «на верх» (в правом нижнем углу) реализована https://wpcraft.top/prokrutka-vverh-na-html-i-css/

p.s. Спасибо за замечания. Учту.

Источник

Раскрывающаяся таблица | CSS

Задача: есть HTML таблица с тарифами, которая нужна лишь 30-40% посетителям. Часть её нужно показать сразу, чтобы было понятно, что она присутствует и как оформлена. А большую часть скрыть — она будет появляться по клику на ссылке.

Если сделать ссылку с URL-адресом на эту страницу вида

http://shpargalkablog.ru/2013/11/drop-down-list.html#all1

то список будет показан сразу раскрытым.

 /* у таблицы может быть любой класс или id */ .demotable < width: 100%; border-collapse: collapse; text-align: center; >.demotable thead < font-size: small; text-align: right; >.demotable tbody td, .demotable tbody th < border: 1px groove #e1d188; >.demotable tbody tr:nth-of-type(1) th < background: #fff5d7; >.demotable a[href^="#all"], .demotable a[href="#close"] < text-decoration: none; border-bottom: 1px dashed; >/* здесь вся магия, если браузер не поддерживает структурные псевдоклассы, то список будет раскрыт, т.е. доступ к данным сохранится */ [id^="all"] < position: fixed; /* чтобы страница "не подпрыгивала" к id */ > [id^="all"]:target + table a[href^="#all"], [id^="all"]:not(:target) + table tbody tr:nth-of-type(n+4), /* 4 - это порядковый номер tr, после которого строки будут изначально удалены (включительно) */ [id^="all"]:not(:target) + table a[href="#close"] all1 на all2 или all40 --> 
id="all1"/>   свернутьhref="#all1">развернуть  href="#all1">посмотреть весь список  Столбец 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 

Источник

Выпадающий список в виде таблицы

Выпадающий список из таблицы данных
Здравствуйте! Я недавно изучаю MS Access, и очень нужна Ваша помощь: Имеется БД со.

Выпадающий список, данные из таблицы
Как заполнить выпадающий список данными из таблиц? В одной таблице содержится численное значение.

Выпадающий список для отображения таблицы
Добрый день! На одном листе расположены 5 одинаковых таблиц (Табл1:B3-E8, Табл: G3-J8, Табл: L3-O8.

Выпадающий список и вывод данных из таблицы
Здравствуйте! Прошу вашей помощи, т.к. в PHP я абсолютный чайник. Есть 3 таблицы закупок в БД.

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

style> .dropdown < position: relative; display: inline-block; >.dropdown-content < display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; >.dropdown:hover .dropdown-content < display: block; >/style> div class="dropdown"> span>Mouse over me/span> div class="dropdown-content"> ul> li>a href = "#">Link1/a>/li> li>a href = "#">Link2/a>/li> /ul> /div> /div>

Как сделать выпадающий список, в котором каждая из опций будет в виде списка
Как сделать внизспадной список в котором каждая из опций будет в виде списка. На фото пример. .

Выпадающий список в качестве элемента таблицы StringGrid
Суть в том, что таблица отображает форму и содержание многомерного массива. Допустим, что массив.

Выпадающий список (select) из всех записей таблицы
товарищи, пытаюсь сделать выпадающий список (select) из записей таблицы (название которой breed).

Источник

CSS Выпадающие списки

Создание выпадающего списка, когда при наведении появляется элемент.

Пример

.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
>

.dropdown:hover .dropdown-content display: block;
>

Объяснение примера

HTML) Использовать любой элемент для открытия выпадающего списка, например: элемент a , или a .

Использовать элемент контейнера (например: ) для создания выпадающего списка и всего, того, что угодно вы хотите добавить внутри его.

Оберните элемент вокруг элементов, чтобы правильно расположить выпадающие содержимое с помощью CSS.

CSS) Класс .dropdown использует position:relative , которая необходима, чтобы выпадающее содержимое находилось прямо под выпадающем кнопкой (с помощью position:absolute ).

Класс .dropdown-content содержит фактическое содержимое выпадающего списка. Он скрыт по умолчанию, и будет отображаться при наведении (см. ниже).

Примечание: min-width имеет значение 160 пикселей. Не бойтесь изменить его.

Совет: Если вы хотите, чтобы ширина выпадающего контента была, как выпадающая кнопку , установите width в 100 процентов (и overflow:auto включить прокрутку на маленьких экранах).

Вместо использования границы мы использовали CSS свойство box-shadow для того, чтобы сделать выпадающее меню как «карточку».

Селектор :hover используется для отображения выпадающего меню, при перемещении наведите указатель мыши на кнопку раскрывающегося списка.

Выпадающее меню

Создание выпадающего меню, позволяющего пользователю выбрать параметр из списка:

Этот пример похож на предыдущий, за исключением того, что мы добавляем ссылки в выпадающем окне и стиль под кнопки в выпадающем стиле:

Пример

/* контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>

/* Выпадающей контент (по умолчанию скрыт) */
.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Изменить цвет выпадающих ссылок при наведении */
.dropdown-content a:hover

/* Показать выпадающее меню при наведении */
.dropdown:hover .dropdown-content display: block;
>

/* Изменить цвет фона выпадающего кнопка при отображении выпадающего списка */
.dropdown:hover .dropbtn background-color: #3e8e41;
>

Источник

Создание таблицы со скользящими элементами

Как обычно сперва самостоятельно посмотрите на пример и попробуйте кликнуть на элемент таблицы:

Посмотреть примерСкачать

Пример раскрытых элементов:

Как установить данную таблицу на свой сайт?

1 Подключаем иконочные шрифты

Между тегами и подключаем иконки от Font Awesome:

link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Это будет не совсем стандартная таблица, потому что она будет состоять только из блоков:

1 2 3 4 5 6 7 8 9 10 11 12 13

div id="services" class="cf"> class="service"> div class="service-icon"> span class="fa fa-paper-plane">/span> br/> Заголовок 1 /div> div class="service-description"> p>Текст блока/p> /div> /section> . /div>

• Строки: со 2 по 11 — отдельный элемент таблицы.
• Строки: с 3 по 7 — видимая часть элемента с иконкой.
• Строки: с 8 и 10 — часть элемента, которая появляется по клику.

2 CSS стили

На данном этапе у нас присутствует только структура таблицы и нет ни единого стиля. Давайте же сделаем таблицу более красивой:

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

#services { max-width: 850px; margin: 30px auto 0; } #services .service .service-icon:hover { cursor: pointer; color: #28B595; } #services .service .service-icon span { display: block; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; } #services .service .service-icon span.fa { font-size: 40px; } #services .service .service-icon { text-align: center; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; } #services .service .service-icon:hover span { position: relative; bottom: 5px; } #services .service { width: 33%; float: left; padding: 0.5em; min-height: 200px; overflow: hidden; position: relative; border: 1px solid #eee; } #services .service .service-icon, #services .service .service-description { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; padding: 50px 0; color: #222; } #services .service .service-description { left: 100%; background: #323A45; color: #fff; padding: 50px; } #services .service .service-description:hover { cursor: pointer; }

Но это еще не всё, потому что на мобильных устройствах мы можем разместить не по три элемента в строке, а последовательно уменьшать количество элементов в зависимости от размера экрана устройства. Делается это с помощью медиа запросов:

@media screen and (max-width: 600px) #services .service { width: 50%; } } @media screen and (max-width: 320px) #services .service { width: 100%; } }

3 jQuery

Осталось подключить библиотеку jQuery и обработать клик мышкой по элементу:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">/script> script> $(document).ready(function() < $('.service').click(function() < var $this = $(this); if ($this.hasClass("open")) < $this.find('.service-icon').animate(); $this.find('.service-description').animate(); $this.removeClass("open"); > else < $this.find('.service-icon').animate(); $this.find('.service-description').animate(); $this.addClass("open"); > >); >); /script>

На этом установка завершена!

Вывод

Размещая информацию в таблицах мы хотим как можно более компактно разместить большое количество данных. С данной таблицей можно разместить на той же части страницы в 2 раза больше информации. Конечно не всегда можно применить данный способ, но нужно всегда помнить о нём. Поэтому советую добавить в закладки, чтобы Вы смогли быстро найти его.

Источник