-2

Вот макет

введите сюда описание изображения

Как сверстать такую таблицу на flexbox ?

0

1 ответ 1

0

Ни делал адаптивно ..но похоже вроде бы

.wrapper {
  border: 1px solid;
  width: 800px;
  margin: auto;
  padding: 0 4px;
}

.header {
  display: flex;
}

.header p,
.header div {
  width: 140px;
}

.header p:not(:first-child),
.header div {
  text-align: center;
}

.header div,
.header div p {
  width: 240px;
}

.header div p:not(:first-child) {
  display: flex;
  justify-content: center;
}

.header div p span {
  width: 50px;
  text-align: center;
}

.header div p span:nth-of-type(2) {
  margin: 0 20px;
}

.row {
  display: flex;
}

.row p {
  width: 140px;
  text-align: center;
  border: 1px solid #ccc;
}

.row p:first-child {
  text-align: left;
}

.row p:nth-of-type(3) {
  width: 240px;
  text-align: center;
}

.row p:nth-of-type(3) span:nth-of-type(2) {
  margin: 0 60px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">

<div class="wrapper">
  <div class="header">
    <p>Включено</p>
    <p>Работа подоговору</p>
    <div>
      <p>Абонетское обслуживание</p>
      <p>
        <span>Вар 1</span>
        <span>Вар 2</span>
        <span>Вар 3</span>
      </p>
    </div>
    <p>Покопийное обслуживание</p>
    <p>Разное обслуживание</p>
  </div>
  <div class="row">
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam?
    </p>
    <p></p>
    <p>
      <span>
        <i class="fas fa-angle-down"></i>
      </span>
      <span>
        <i class="fas fa-angle-down"></i>
      </span>
      <span>
        <i class="fas fa-angle-down"></i>
      </span>
    </p>
    <p>
      <i class="fas fa-angle-down"></i>
    </p>
    <p></p>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.