Как я могу сделать таблицу покупок в Woocommerce отзывчивой?

Question

Я работаю с WooCommerce, и я пытаюсь создать таблицу, в которой перечислены все продукты на странице корзины покупок, чтобы она стала отзывчивой. Тем не менее, я все время сталкиваюсь с проблемами, и теперь я застрял в течение нескольких часов, пытаясь понять, что случилось. Я не могу установить ширину для чего-нибудь там. Это похоже на то, что у всех td есть магическая обивка вокруг них, и в результате я не могу установить max-width: 100%; для таблицы.

Here's a link to the problem (might be you have to add a product to the basket to see the issue)

Цените любую помощь :)

Answer 1

Для любого, имеющего ту же проблему с WooCommerce, где таблицы на странице корзины не быть отзывчивым, это то, как я установил его:

.woocommerce table.cart th, 
.woocommerce table.cart td, 
.woocommerce #content table.cart th, 
.woocommerce #content table.cart td, 
.woocommerce-page table.cart th, 
.woocommerce-page table.cart td, 
.woocommerce-page #content table.cart th, 
.woocommerce-page #content table.cart td, 
.woocommerce table.shop_table th, 
.woocommerce-page table.shop_table th, 
.woocommerce table.shop_table td, 
.woocommerce-page table.shop_table td { 
    min-width: 30px; 
} 

Для по какой-то причине, которую я действительно не понимаю, все данные заголовка таблицы и таблицы должны иметь min-width.

Answer 2

Это работает для видового экрана с 384px и выше, но, похоже, не работает ниже этого. Я добавил max-width: 49px; для до 360 пикселей, а затем максимальная ширина: 39 пикселей; для видового экрана 320 пикселей. Надежда помогает кому-то.

Спасибо за работу!