Можно ли визуально отображать строки по горизонтали, а не по вертикали?

Question

Я хочу отобразить набор изображений, которые расположены рядом друг с другом

   <table id="datatable" class="table table-colored table-info">
    <thead>
     <tr >
   <th>Product_Name</th>
   <th>Image</th>
 </tr>
</thead>
<tbody>
    <?php while ($players_list=m ysqli_fetch_array($players_fun)) { ?>
 <tr>
   <td>
   <?php echo $players_list[ 'product_name']; ?>
   </td>
   <td>
   <div class="col-sm-4">
  <img src=" <?php echo $players_list[ 'product_IMAGE']; ?>" >
   </div>
   </td>
 </tr>
 <?php }?>
</tbody>
    </table>   

это моя таблица, я могу показать 3-3 изображения в каждой строке?

На самом деле я хотелвоспользоваться возможностями поиска и сортировки таблицы данных ..

Answer 1

Вы можете использовать css grid или flex для достижения этой цели.Я попытался с помощью сетки CSS, пожалуйста, найдите здесь

.img-vertical {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // sets the horizontal layout
    grid-gap: 1em;
    place-content: center;
}

.img-vertical img {
    max-width: 50px;
}

.img-horizontal {
    grid-template-columns: repeat(1, 1fr); // sets vertically
}

в качестве альтернативы, гибкая реализация, как показано ниже

.img-vertical {
    display: flex; 
    align-items: center;
    flex-flow: column; // sets vertically
}

.img-vertical img {
    max-width: 50px;    
}

.img-horizontal {
    flex-flow: row; // sets the horizontal layout
}