Di21H
@Di21H
Обычный человек

Как сделать таблицу с border без тега table?

y-4hC6JaRH2-rG2BhPkfLQ.png

Хочу сделать такую адаптивную таблицу. Всё бы ничего, но как это реализовать с div'ами, чтобы у всех были грани?
  • Вопрос задан
  • 29 просмотров
Пригласить эксперта
Ответы на вопрос 1
https://jsfiddle.net/b1vc72tk/

<div class="catalog">
  <div class="catalog__container">
    <div class="catalog-item">
      <div class="catalog-item__inner">
      
      </div>
    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
    <div class="catalog-item">

    </div>
  </div>
</div>


.catalog {
  
  &__container{
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #c5c5c5;
    border-right: 1px solid #c5c5c5;
    
    @media (min-width: 505px) {
      width: 505px;
    }
    
    @media (max-width: 504px) {
      width: 205px;
    }
    margin: 0 auto;
  }
  
  &-item{
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-left: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
    
    &::before{
      content: '';
      width: 100%;
      height: 1px;
      background-color: #c5c5c5;
    }
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 февр. 2021, в 22:16
10000 руб./за проект
26 февр. 2021, в 21:56
20000 руб./за проект