Как сверстать эту таблицу

376

06 ноября 2018, 17:40

Есть данная картинка-пример, не знаю как сверстать так, чтобы были линии разделяющие картинки.

Нужна просто идея

Answer 1

Вообще, здесь реализация зависит от HTML-разметки, а HTML разметка зависит от того, где это будет использоваться и что будет с адаптивом. Вам видимо без разницы какая будет разметка и где это вообще будет использоваться, а вопрос адаптивности тем более не заботит. В таком случае, возьмите мой вариант.

.container { 
  max-width: 1170px; 
  margin: 0 auto; 
  width: 100%; 
} 
 
.row { 
  border-bottom: 1px solid gray; 
  display: flex; 
  justify-content: space-between; 
  padding: 0 7vw; 
} 
 
.col { 
  align-items: center; 
  border-right: 1px solid gray; 
  display: flex; 
  justify-content: center; 
  padding: 1.5vw; 
  width: 25%; 
} 
 
.col:last-child { 
  border-right: none; 
} 
 
img { 
  display: block; 
  height: auto; 
  width: 100%; 
}

<div class="container"> 
  <div class="row"> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
    <div class="col"> 
      <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> 
    </div> 
  </div> 
</div>