Вопрос: WOocommerce таблицы не реагируют на мобильные

Я начал понимать, что таблицы woocommerce являются худшими для мобильных адаптивных таблиц. Кто-нибудь имел какой-либо успех с правильным файлом CSS, где таблицы не сложены? Я хочу просто сжать столы. Самые мучительные таблицы находятся на странице «Мои заказы» и в корзине /оформлении заказа ... заранее спасибо за любую помощь!

Ответы и комментарии:

Я попробовал это ... не помогло. на самом деле, некоторые таблицы для woocommerce стали меньше!
Создан 29-06-2018 01:03 RickMorty

Я обычно помещаю любую таблицу в скрытый div с переполнением, который позволяет горизонтальную прокрутку с определенной шириной области просмотра в зависимости от того, сколько столбцов имеет ваша таблица.
Создан 30-06-2018 04:22 Nathaniel Flick

Ниже Css добавь свой css файл
 / * НАЧАТЬ Сделать таблицу корзины WooCommerce адаптивной для мобильных устройств * /
экран @media и (максимальная ширина: 600 пикселей) {

/ * Заставить таблицу больше не походить на таблицы * /
.woocommerce-page table.shop_table,
.woocommerce-page table.shop_table thead,
.woocommerce-page table.shop_table tbody,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td,
.woocommerce-page table.shop_table tr {
    дисплей: блок;
}

/ * Скрыть заголовки таблицы (но не отображать: нет; для доступности) * /
.woocommerce-page table.shop_table thead tr {
    положение: абсолютное;
    верх: -9999px;
    слева: -9999 пикселей;
}

.woocommerce-page table.shop_table tr {
    / * граница: 1px solid # d2d3d3; * /
}

.woocommerce-page table.shop_table td {
    / * Веди себя как "ряд" * /
    граница: 1px solid # d2d3d3;
    положение: относительное;
    отступ слева: 30%! важно;
}

.woocommerce-page table.shop_table {
    граница: нет;
}

.woocommerce-page table.shop_table td.product-spacer {
    цвет границы: #FFF;
    высота: 10 пикселей;
}

.woocommerce-page table.shop_table td: before {
    / * Теперь как заголовок таблицы * /
    положение: абсолютное;
    / * Верхние / левые значения имитируют заполнение * /
    верх: 6 пикселей;
    слева: 6 пикселей;
    ширина: 45%;
    отступ справа: 10 пикселей;
    пустое пространство: nowrap;
}

/ *
Маркируйте данные
* /
.woocommerce-page table.shop_table td.product-remove: before {
    содержание: "УДАЛИТЬ";
}

.woocommerce-page table.shop_table td.product-thumbnail: before {
    содержание: «ИЗОБРАЖЕНИЕ»;
}

.woocommerce-page table.shop_table td.product-name: before {
    содержание: «ПРОДУКТ»;
}

.woocommerce-page table.shop_table td.product-price: before {
    содержание: "ЦЕНА";
}

.woocommerce-page table.shop_table td.product-amount: before {
    содержание: "КОЛИЧЕСТВО";
}

.woocommerce-page table.shop_table td.product-subtotal: before {
    содержание: "SUBTOTAL";
}

.woocommerce-page table.shop_table td.product-total: before {
    содержание: "ИТОГО";
}

.woocommerce .quantity,
.woocommerce #content .quantity,
.woocommerce-page .quantity,
.woocommerce-page #content .quantity {
    поле: 0;
}

.woocommerce-page table.cart td.actions,
.woocommerce-page #content table.cart td.actions {
    выравнивание текста: слева;
    граница: 0;
    padding-left: 6px! важный;
}

.woocommerce-page table.cart td.actions .button.alt,
.woocommerce-page # содержание table.cart td.actions .button.alt {
    плыть налево;
    маржинальная вершина: 10px;
}

.woocommerce-page table.cart td.actions div,
.woocommerce-page #content table.cart td.actions div,
.woocommerce-page table.cart ввод td.actions,
.woocommerce-page #content table.cart td.actions input {
    нижнее поле: 10 пикселей;
}

.woocommerce-page .cart-collaterals .cart_totals {
    плыть налево;
    ширина: 100%;
    выравнивание текста: слева;
}

.woocommerce-page .cart-collaterals .cart_totals th,
.woocommerce-page .cart-collaterals .cart_totals td {
    граница: 0! важно;
}

.woocommerce-page .cart-collaterals .cart_totals table tr.cart-subtotal td,
.woocommerce-page .cart-collaterals .cart_totals таблица tr.shipping td,
.woocommerce-page .cart-collaterals .cart_totals table tr.total td {
    padding-left: 6px! важный;
}

.woocommerce-page table.shop_table tr.cart-subtotal td,
.woocommerce-page table.shop_table tr.shipping td,
.woocommerce-page table.shop_table tr.total td,
.woocommerce-page table.shop_table.order_details tfoot th,
.woocommerce-page table.shop_table.order_details tfoot td {
    padding-left: 6px! важный;
    граница: 0! важно;
}

.woocommerce-page table.shop_table tbody {
    padding-top: 10px;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2,
.woocommerce форма .form-row-first,
.woocommerce форма .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
    плавать: нет;
    ширина: 100%;
}

.woocommerce .order_details ul,
.woocommerce-page .order_details ul,
.woocommerce .order_details,
.woocommerce-page .order_details {
    обивка: 0;
}

.woocommerce .order_details li,
.woocommerce-page .order_details li {
    ясно: слева;
    нижнее поле: 10 пикселей;
    граница: 0;
}

}

/ * END сделать таблицу корзины WooCommerce отзывчивой для мобильных устройств * /
Создан 29-06-2018 04:19 Dharmishtha Patel43811