Как правильно сделать адаптивную версию корзины?

Question

[Сергей Миронов]

Всем привет!

Есть декстопная версия корзины, которую нужно сделать адаптивной.

Декстопная корзина написана в table.
Для адаптивной нужно делать в div.

Для адаптивной версии я хотел скрыть корзину table и показать корзину div, но столкнулся с такой проблемой, что в декстопной корзине есть name="", которая передается и если будет две корзины в одной форме, то это все испортит.

Хотел с помощью flex перерасположить ячейки в таблице для адаптивной версии, но вроде как для table flex не работает.

Остается только вариант переделать декстопную корзину под див. Но может есть и другие варианты. Подскажите, кто знает

Comments

[Сергей delphinpro]

Хотел с помощью flex перерасположить ячейки в таблице для адаптивной версии, но вроде как для table flex не работает.

Надо не хотеть, а пробовать. Все работает.

[Rustam Bainazarov]

Я делал дублирующие блоки с помощью JS. Они показывались внутри первой колонки и скрывались @media-запросами. Ну а их внутренний контент я клонировал из оригинальных блоков. Т. е. в форму они не передавали дублирующие данные. Бэкенд не позволял дублировать изначально данные в разные блоки.

Можно было сделать без JS, если бы я делал на grid. Но я делал на Flexbox.

Answer 1

[Дима Паутов]

Таблицу спокойно можно адаптировать меняя у неё её табличные стили на блочные

@media (max-width: 1024px) {
table,
td,
th,
tr,
tbody,
thead,
tfoot {
display: block;
}
}

и уже оформлять как и обычные дивы

Comments

[Сергей Миронов]

А можно как-нибудь местами поменять еще?

[Дима Паутов]

Сергей Миронов, что местами менять?

[Сергей Миронов]

Блоки местами поменять, например, используя flex

[Дима Паутов]

Сергей Миронов, таблица - это такой же как и div html элемент. Ему точно так же можно задавать css свойства как и простому div. Таблицу от div'а отличает лишь заданный браузером набор css свойств и всё