Maks | wip: новая таблица для РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ

wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css

@@ -1147,11 +1147,19 @@ main{
   opacity: .6;
 }
 
+
+/* End | Toggle */
+
+
 .radio-button{
 }
 .radio-button__input{
   display: none;
 }
+
+
+
+
 /* detail */
 
 /* gallery */

wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig

@@ -179,26 +179,106 @@
                             </p>
                             <div class="toggle__block-content">
                                 <div class="toggle__content">
+
+
+                                    <style>
+                                        .toggle__table {
+                                            width: 100%;
+                                            border-collapse: collapse;
+                                            table-layout: fixed;
+                                        }
+
+                                        .toggle__table th,
+                                        .toggle__table td {
+                                            width: 33.33%;
+                                            vertical-align: top;
+                                            padding: 8px;
+                                            text-align: left;
+                                        }
+
+                                        .toggle-table__title {
+                                            font-weight: bold;
+                                            font-size: 16px;
+                                        }
+
+                                        .toggle-table__item {
+                                            position: relative;
+                                            padding-bottom: 10px;
+                                        }
+
+                                        .toggle-table__item p {
+                                            display: inline-block;
+                                            margin: 0;
+                                            background: #fff; /* подложка, если нужно перекрыть линию */
+                                            padding-right: 4px;
+                                            z-index: 1;
+                                            position: relative;
+                                        }
+
+                                        /* Линия-многоточие */
+                                        .toggle-table-item__line {
+                                            position: absolute;
+                                            left: 0;
+                                            bottom: 4px;
+                                            width: 100%;
+                                            border-bottom: 1px dotted #aaa;
+                                            z-index: 0;
+                                        }
+
+                                        /* Адаптив */
+                                        @media (max-width: 768px) {
+                                            .toggle__table th,
+                                            .toggle__table td {
+                                                font-size: 14px;
+                                                padding: 6px;
+                                            }
+                                        }
+
+                                        /* Maks */
+                                        .toggle__table tbody,
+                                        .toggle__table thead,
+                                        .toggle__table thead tr{
+                                            width: 100%;
+                                        }
+                                        .toggle__table thead tr{
+                                            display:flex;
+                                        }
+                                        .toggle__table tbody tr{
+                                            display: flex;
+                                            gap: 8px;
+                                        }
+                                    </style>
                                     
-                                    {# <table  class="toggle__table">
+                                    
-                                        <tr>
+                                    <table class="toggle__table toggle__table--three">
-                                            <th class="toggle-table__title">Россия</th>
+                                        {% if product_meta.feeding_recommendations_table.header is defined %}
-                                            <th class="toggle-table__title">Великобритания</th>
+                                            <thead>
-                                            <th class="toggle-table__title">Европа</th>
+                                                <tr>
-                                        </tr>
+                                                    {% for col in product_meta.feeding_recommendations_table.header %}
-                                        <tr>
+                                                        <th class="toggle-table__title">{{ col.c }}</th>
-                                            <td class="toggle-table__item">
+                                                    {% endfor %}
-                                                <p>34,5</p>
+                                                </tr>
-                                                <div class="toggle-table-item__line"></div>
+                                            </thead>
-                                            </td>
+                                        {% endif %}
-                                            <td class="toggle-table__item">
+                                        <tbody>
-                                                <p>34,5</p>
+                                            {% for row in product_meta.feeding_recommendations_table.body %}
-                                                <div class="toggle-table-item__line"></div>
+                                                <tr>
-                                            </td>
+                                                    {% for cell in row %}
-                                        </tr>
+                                                        <td class="toggle-table__item">
-                                    </table> #}
+                                                            <p>{{ cell.c }}</p>
-
+                                                            <div class="toggle-table-item__line"></div>
-                                    <div class="toggle__table toggle__table--three">
+                                                        </td>
+                                                    {% endfor %}
+                                                </tr>
+                                            {% endfor %}
+                                        </tbody>
+                                    </table>
+    
+
+
+
+                                    {# Старая таблица #}
+                                    {# <div class="toggle__table toggle__table--three">
                                         {% if product_meta.feeding_recommendations_table.header %}
                                             <div class="toggle-table__block">
                                                 <p class="toggle-table__title">{{ product_meta.feeding_recommendations_table.header.0 is iterable ? product_meta.feeding_recommendations_table.header.0|join(', ') : product_meta.feeding_recommendations_table.header.0 }}</p>
@@ -227,7 +307,9 @@
                                                 {% endfor %}
                                             </div>
                                         {% endif %}
-                                    </div>
+                                    </div> #}
+
+
                                 </div>
                             </div>
                         </div>