lovebarcafc
@lovebarcafc
Кратко не получится

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

Есть дизайн таблицы:
5ecb26b0d56c7460677139.jpeg

Есть сверстанная таблица:
5ecb260c79324213222739.png

Не могу понять, как мне расположить выпадающий блок в строке таблицы?
Все варианты, которые я использовал ломали верстку.
Есть решение?
  • Вопрос задан
  • 94 просмотра
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
1. Дополнительные строки в таблице (которые открывать по клику), геморрно и тебе придется считать на JS размер 3х строк, чтобы под них кинуть плашку с тенью.
2. 8-й TD с обтеканием. И принудительным отображением не как ячейка таблицы (старый добрый хак для адаптивных таблиц). Очень давно не применял, поэтому могу ошибаться на счет исполнения, гугл поможет.
3. Не использовать таблицы.
Ответ написан
@strelok011
Ну, на самом деле это всё можно решить довольно просто, без разрушения связности строк в таблице. Но для этого необходимо добавить разметки в структуру таблицы
https://codepen.io/Strelok011/pen/wvKZadJ

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
16 июл. 2020, в 17:28
10000 руб./за проект
16 июл. 2020, в 17:26
3000 руб./за проект
16 июл. 2020, в 17:04
500 руб./в час