|
|
|
|
@ -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> |
|
|
|
|
<th class="toggle-table__title">Россия</th> |
|
|
|
|
<th class="toggle-table__title">Великобритания</th> |
|
|
|
|
<th class="toggle-table__title">Европа</th> |
|
|
|
|
</tr> |
|
|
|
|
<tr> |
|
|
|
|
<td class="toggle-table__item"> |
|
|
|
|
<p>34,5</p> |
|
|
|
|
<div class="toggle-table-item__line"></div> |
|
|
|
|
</td> |
|
|
|
|
<td class="toggle-table__item"> |
|
|
|
|
<p>34,5</p> |
|
|
|
|
<div class="toggle-table-item__line"></div> |
|
|
|
|
</td> |
|
|
|
|
</tr> |
|
|
|
|
</table> #} |
|
|
|
|
|
|
|
|
|
<div class="toggle__table toggle__table--three"> |
|
|
|
|
|
|
|
|
|
<table class="toggle__table toggle__table--three"> |
|
|
|
|
{% if product_meta.feeding_recommendations_table.header is defined %} |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
{% for col in product_meta.feeding_recommendations_table.header %} |
|
|
|
|
<th class="toggle-table__title">{{ col.c }}</th> |
|
|
|
|
{% endfor %} |
|
|
|
|
</tr> |
|
|
|
|
</thead> |
|
|
|
|
{% endif %} |
|
|
|
|
<tbody> |
|
|
|
|
{% for row in product_meta.feeding_recommendations_table.body %} |
|
|
|
|
<tr> |
|
|
|
|
{% for cell in row %} |
|
|
|
|
<td class="toggle-table__item"> |
|
|
|
|
<p>{{ cell.c }}</p> |
|
|
|
|
<div class="toggle-table-item__line"></div> |
|
|
|
|
</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> |
|
|
|
|
|
