0

Как сделать данную таблицу, хотя бы на идею наткните

Вот таблица: Table

2
  • уберите ссылку на картинке и вставьте её исходник в вопрос. 7 авг 2018 в 16:35
  • Она не загружалась на imgur
    – Netahaki
    7 авг 2018 в 16:53

3 ответа 3

3

Вариант с display: grid;

.table {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-gap: 10px;
}
.table-item {
  display: block;
  width: 100%;
}

.table-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<div class="table">
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Вариант с display: inline-block;

.table {
  display: block;
  width: 100%;
}

.table-item {
  display: inline-block;
  width: calc((100% / 5) - 10px);
  margin: 5px;
  float: left;
}

.table-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<div class="table">
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="table-item">
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

0

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

<table>
    <tr>
        <td background="ссылка на изображение">Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
</table>

0
0

Попробуй так

section{
    width: 100%;
    border-top: 1px solid  #dadada;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
}

section div:first-child, section div:nth-child(2n+1) { 
    border-bottom: none;
    border-top: none;
}
section div:nth-child(2n) { 
    border-bottom: none;
    border-top: none;
}
div {
    width: 100%;
    height: 100%;
    max-width: 100px;
    display: inline-block;
    border: 1px solid #dadada;
    margin: 0;
    padding: 40px;
}
img{
    margin: 0 auto;
    display: table;
}
<section style="border: none;"><div> </div> 
 <div></div> 
 <div></div> 
 <div></div> 
</section>

<section>
  <div> <img src="https://thumb.ibb.co/mPA1BK/teamspeak.png" alt="">
  </div> 
  <div><img src="https://thumb.ibb.co/mPA1BK/teamspeak.png" alt="">
  </div> 
  <div><img src="https://thumb.ibb.co/mPA1BK/teamspeak.png" alt="">
  </div> 
  <div><img src="https://thumb.ibb.co/mPA1BK/teamspeak.png" alt="">
  </div>
</section>

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

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