/* Таблицы в описаниях товаров (ТЗ п. 20). * * Описания набивались вручную и в общем случае недетерминированы, но сами * таблицы в них устроены одинаково: снято с прода 04.08.2026 — 544 таблицы у * 131 товара, у всех до одной есть , 504 из них двухколоночные. * Этого достаточно, чтобы привести их к одному виду одним CSS, не трогая * содержимое: любая будущая таблица подхватится тем же правилом. * * Что было до этого: стили таблиц не задавал никто, и Astra рисовала рамку * только справа и снизу каждой ячейки цветом #f2f5f7 — почти белая сетка на * тёмном фоне, без внешней рамки сверху и слева. Плюс border-collapse: * separate, кегль 20 px и полное отсутствие горизонтальной прокрутки: на * телефоне таблица шириной 475 px вылезала из колонки шириной 253 px. * * Селектор привязан к виджету описания Elementor (woocommerce-product-content), * чтобы не задеть таблицы корзины, оформления заказа и админки. */ .elementor-widget-woocommerce-product-content table { width: 100%; margin: 0 0 8px; border: 0; border-collapse: collapse; border-radius: 16px; overflow: hidden; background: #1f2128; font-size: 17px; line-height: 1.45; /* Ширины колонок задаёт разметка, а не самая длинная строка: иначе колонка с описанием растягивается и вытесняет остальные. */ table-layout: fixed; } /* Шапка. Тот же градиент, что у кнопок в шапке сайта и в конфигураторе. * * Цвет и градиент заданы порознь намеренно. Elementor печатает в * правило ленивой загрузки фонов: * * .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * * { background-image: none !important } * * Описание товара лежит глубоко на странице, поэтому до прокрутки его * контейнер ещё не помечен .e-lazyloaded — и любой background-image внутри * гасится, включая градиент шапки (перебить нельзя даже инлайном: правило с * !important). background-color под это правило не попадает, поэтому до * ленивой загрузки шапка заливается ровным цветом, после — градиентом, и * пустой прозрачной полосы не возникает ни на одном кадре. */ .elementor-widget-woocommerce-product-content thead th { padding: 14px 18px; border: 0; background-color: #8e6ef7; background-image: linear-gradient(135deg, #8e6ef7 0%, #a939f3 100%); color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; /* Astra центрирует th, тело таблицы при этом слева — колонки визуально разъезжаются. Выравниваем по одному краю. */ text-align: left; vertical-align: middle; } .elementor-widget-woocommerce-product-content tbody td { padding: 13px 18px; border: 0; /* Разделители вместо сетки: горизонтальные, едва заметные. */ border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #ececec; vertical-align: top; /* Длинные модели («DEEPCOOL AG400 BK ARGB») не должны распирать колонку. */ overflow-wrap: anywhere; } .elementor-widget-woocommerce-product-content tbody tr:last-child td { border-bottom: 0; } .elementor-widget-woocommerce-product-content tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.022); } /* Первая колонка — всегда название узла. Приглушаем и уплотняем. */ .elementor-widget-woocommerce-product-content tbody td:first-child { width: 30%; color: #b6b8c2; font-weight: 600; } .elementor-widget-woocommerce-product-content tbody td:first-child strong { font-weight: 600; } /* Двухколоночные — таких 504 из 544: значению отдаём весь остаток. */ .elementor-widget-woocommerce-product-content tbody td:last-child { color: #ffffff; } /* Обёртка от редактора, в котором набивали описания. Есть у всех 544 таблиц, но полагаться на неё нельзя — отступ дублируем на самой таблице выше. */ .elementor-widget-woocommerce-product-content .ds-scroll-area { margin: 0 0 28px; } /* Заголовки разделов описания идут вплотную к таблице — разводим. */ .elementor-widget-woocommerce-product-content h4 { margin-top: 34px; margin-bottom: 14px; } .elementor-widget-woocommerce-product-content hr { margin: 30px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); } /* Планшет: та же таблица, плотнее. */ @media (max-width: 1024px) { .elementor-widget-woocommerce-product-content table { font-size: 16px; } .elementor-widget-woocommerce-product-content thead th, .elementor-widget-woocommerce-product-content tbody td { padding: 11px 14px; } } /* Телефон: строка превращается в карточку. * * Горизонтальную прокрутку не делаем намеренно — у 93 % таблиц первая ячейка * это и есть подпись («Процессор»), поэтому колонка заголовков на узком экране * не нужна, а карточка «подпись → значение» читается лучше, чем таблица, * которую надо возить пальцем. */ @media (max-width: 767px) { .elementor-widget-woocommerce-product-content table { display: block; background: none; border-radius: 0; font-size: 16px; } .elementor-widget-woocommerce-product-content thead { /* display:none убрал бы шапку и из чтения с экрана — прячем визуально. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .elementor-widget-woocommerce-product-content tbody, .elementor-widget-woocommerce-product-content tbody tr, .elementor-widget-woocommerce-product-content tbody td { display: block; width: auto; } .elementor-widget-woocommerce-product-content tbody tr { margin-bottom: 12px; padding: 14px 16px; border-radius: 14px; background: #1f2128; } .elementor-widget-woocommerce-product-content tbody td { padding: 0; border-bottom: 0; background: none !important; } .elementor-widget-woocommerce-product-content tbody td:first-child { width: auto; margin-bottom: 4px; color: #a78bfa; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .elementor-widget-woocommerce-product-content tbody td + td { margin-top: 6px; } }