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

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

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

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

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

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

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

Войти через центр авторизации
Похожие вопросы