Адаптивная таблица со спойлером?

Question

[Алексей Каратеев]

Всем привет! Передо мной встала задача, которую я лично раньше не встречал. Дизайнер нарисовал таблицу, которую можно раскрыть и посмотреть дополнительный контент. То есть, по сути, это таблица-спойлер.



Я пробовал реализовать это посредством стандартных средств html - table, thead. tbody, tr, th, td. И все вроде бы не плохо, пока я не начал пытаться прикрутить к этому функционал спойлера. Таблицы в HTML живут по своим законам и не любят, когда что-то приходит извне. Вот и мои попытки внедрить функционал спойлера они не приняли, и все начинает ломаться и криво работать.

Так вот, есть ли у вас идеи, как это можно максимально удобно и правильно реализовать? Я думал попробовать сделать на гридах, например. Может кто-то сталкивался с таким?

Answer 1

[tyoma_koder]

используй тег details

Comments

[Алексей Каратеев]

А как разместить его в таблице? Точнее под той же tr. Он просто выплевывается из таблицы

[tyoma_koder]

Алексей Каратеев, details вместо таблицы, в summary display: flex или grid

Answer 2

[Pavel-ww]

Я пробовал реализовать это посредством стандартных средств html - table, thead. tbody, tr, th, td. И все вроде бы не плохо, пока я не начал пытаться прикрутить к этому функционал спойлера.

Надо таблицу засовывать в спойлер, а не спойлер в таблицу. То есть сначала верстаете спойлер, потом в кнопки спойлера помещаете строки таблицы (по сути отдельные таблицы в каждой кнопке)

Answer 3

[Евгений Журов]

Используйте datatables

Answer 4

[Antony Bark]

Если вам не претят прямолинейные и примитивные решения, я бы предложил след. конструкцию, потребуется небольшой JS:
HTML

<table>
    <tr><th>..</th></tr>
   <tbody>
    <tr id="foo1" class="close" onclick='toggleClass(this,"open")'><td><div class="line-visible">..</div><div class="line-invisible">..</div></td></tr>

CSS

#foo1 .line-visible {
    height: calc(1rem + (padding-top\bottom));
    overflow-y: hidden; // optional
}
#foo1 .line-invisible {
    width: 100%
    height: 0;   /* OR ​display: none; */
    word-wrap: break-word;
    overflow-y: hidden; // optional
}
#foo1.open .line-visible {
    height: auto;
    overflow-y: visible; // optional
}
#foo1.open .line-invisible {
    height: auto;  /* OR ​display: block; */
    overflow-y: visible; // optional
}

JS

function toggleClass(el, className) {
	if (hasClass(el, className))removeClass(el, className)
		else addClass(el, className);
};
function hasClass(el, className) {
  if (el.classList)
    return el.classList.contains(className)
  else
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
}
function addClass(el, className) {
  if (el.classList)
    el.classList.add(className)
  else if (!hasClass(el, className)) el.className += " " + className
}
function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className)
  else if (hasClass(el, className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
    el.className=el.className.replace(reg, ' ')
}}

Процесс. Изначально скрываемый элемент line-invisible входит в родителя TR с классом close, передающего элементу высоту 0 (или скрытие блока), при клике на родителя TR ему добавляется класс open , снимающий ограничения по невидимости блока. Повторный клик возвращает ситуацию к началу. Пример кода можно глянуть тут https://antonybark.ru/patterns/js_templates/toggle....
Т.к. приведённый в примере JS не использует ниуаках библиотек, кроме браузерных, думаю что его можно как-то даже параметризовать под условия конкретного проекта, но это уже вопрос к вашим спецам по JS.