I'm working with WooCommerce, and I'm trying to style a table that lists all the products on the shopping cart page, so that it becomes responsive. However, I keep running into problems, and now I've been stuck for several hours trying to figure out what's wrong. I can't set a width for anything there. It's like all the tds have magic padding around them, and as a result I can't set a max-width: 100%; for the table.
Here's a link to the problem (might be you have to add a product to the basket to see the issue)
Appreciate any help :)
For anyone having the same issue with Woocommerce where the cart page tables not being responsive, this is how I fixed it:
.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;
}
For some reason which I don't really understand, all the table heading and table data needed to have a min-width.