Woocommerce 结帐页面订单审查表产品名称和数量列太窄答案

【问题标题】：Woocommerce Checkout Page Order Review Table Product Name and Quantity Columns are too narrowWoocommerce 结帐页面订单审查表产品名称和数量列太窄
【发布时间】：2020-02-25 23:36:37
【问题描述】：

我有一个以 Ocean WP 为主题的 Woocommerce 网站。结账页面、订单审核表、产品线一团糟。 仅限移动设备上的产品名称、产品数量和产品金额被压缩成小而窄的列。

我对类似问题进行了无休止的研究，但找不到类似的东西。我尝试修改表格宽度无效。如何查看阻止列占据整个表格宽度的原因？

这是我尝试过的：

@media only screen and (max-width: 600px) {
  tr.cart_item, td.product_name, td.product_total{
    width: 100% !important;
    padding: 0px !important;
    margin: 0px !important;}
  table.woocommerce-checkout-review-order-table .product-quantity {
    width: 200px !important;}   }

这里是链接： https://****.com/checkout/

看截图。

Woocommerce Checkout Page - Order Review

【问题讨论】：

嗨。你有什么办法解决这个问题？
我在描述中添加了一些代码。

标签： wordpress woocommerce

【解决方案1】：

问题不在于您的代码，而在于表格单元格在该屏幕宽度处显示块。

这是在 WooCommerce CSS 中从您的主题“OceanWP”中设置的

@media only screen and (max-width: 767px){
    .woocommerce-page table.shop_table td, .woocommerce-page table.shop_table_responsive td {
        display: block;
        text-align: right !important;
    }
}

要覆盖上述内容，请添加：

@media only screen and (max-width: 767px) {
    .woocommerce-checkout .shop_table td.product-name, .woocommerce-checkout .shop_table td.product-total {
        display: table-cell;
    }
}

【讨论】：