HTML
<div class="comparison">
<div class="container">
<div class="content-title content-title--c"><?php the_field('заголовок_блока_сравнения'); ?></div>
<div class="comparison_block">
<div class="flex_block">
<?php if( have_rows('заголовки_пунктов_таблицы') ): ?>
<div class="comparison--title">
<ul>
<?php while( have_rows('заголовки_пунктов_таблицы') ): the_row(); ?>
<li><p><?php the_sub_field('название'); ?></p></li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
<?php if( have_rows('пункты_таблицы') ): ?>
<?php while( have_rows('пункты_таблицы') ): the_row(); ?>
<div class="comparison--inner">
<div class="title-block"><?php the_sub_field('заголовок_пункта'); ?></div>
<ul>
<?php if( have_rows('вариации_таблицы') ): ?>
<?php while( have_rows('вариации_таблицы') ): the_row(); ?>
<?php if( get_sub_field('текст') ): ?>
<?php else : ?>
<?php if( get_sub_field('плюсминус') == 'plus' ) : ?><li class="plus">+</li><?php endif; ?>
<?php if( get_sub_field('плюсминус') == 'minus' ) : ?><li class="minus">-</li><?php endif; ?>
<?php endif; ?>
<?php if( get_sub_field('текст') ): ?>
<li class="price"><?php the_sub_field('текст'); ?></li>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
LESS
.comparison{
padding-top: 150px;
padding-bottom: 150px;
background: @color-1;
.content-title{
color: #fff;
}
.comparison_block{
padding: 70px 40px;
background: #fff;
border-radius: 20px;
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08);
}
ul{
padding: 0;
margin: 0;
li{
list-style: none;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ededed;
min-height: 44px;
display: flex;
width: 100%;
height: 100%;
align-items: center;
align-content: center;
justify-content: center;
&:first-child{
border-top: 1px solid #ededed;
padding-top: 10px;
}
&:last-child{
margin-bottom: 0;
}
}
}
.comparison--title{
text-align: left;
width: 20%;
padding-top: 77px;
ul{
li{
p{
width: 100%;
font-size: 14px;
line-height: 22px;
}
}
}
}
.comparison--inner{
width: 20%;
text-align: center;
.title-block{
line-height: 26px;
margin-bottom: 25px;
}
ul{
font-weight: bold;
.minus{
font-size: 20px;
color: @color-2;
}
.plus{
font-size: 20px;
color: #66ce5d;
}
}
}
}