是否可以在视觉上水平而不是垂直显示行？答案

【问题标题】：Is it possible to visually display rows horizontally instead of vertically?是否可以在视觉上水平而不是垂直显示行？
【发布时间】：2019-06-21 05:02:12
【问题描述】：

我想显示一组相邻的图像

   <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 张图片吗？

其实我想利用数据表的搜索和排序功能..

【问题讨论】：

DataTables 不仅仅是简单的搜索和排序，有时实现搜索和排序比让 DataTables 做一些它不适合做的事情更容易。

标签： javascript php jquery datatables

【解决方案1】：

您可以使用 css grid 或 flex 来实现这一点。我试过用css网格，请找here

.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
}

或者，flex实现如下

.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
}

【讨论】：