+7 982 100 5 999

Таблица сравнения

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;
            }
        }
    }
}