Как расположить блок в строке таблицы?

Question

[damn]

Есть дизайн таблицы:


Есть сверстанная таблица:


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

Answer 1

[Арсений Матыцин]

1. Дополнительные строки в таблице (которые открывать по клику), геморрно и тебе придется считать на JS размер 3х строк, чтобы под них кинуть плашку с тенью.
2. 8-й TD с обтеканием. И принудительным отображением не как ячейка таблицы (старый добрый хак для адаптивных таблиц). Очень давно не применял, поэтому могу ошибаться на счет исполнения, гугл поможет.
3. Не использовать таблицы.

Answer 2

[strelok011]

Ну, на самом деле это всё можно решить довольно просто, без разрушения связности строк в таблице. Но для этого необходимо добавить разметки в структуру таблицы
https://codepen.io/Strelok011/pen/wvKZadJ

Иными словами:
1. чтобы сделать тень вокруг строки - вам нужно завернуть каждую строку в tbody, для раскрытого элемента добавлять ей класс с тенью
2. добавляете в tbody еще строку tr>td(colspan=число колонок), внутри верстаете в диве весть выпадающий контент.