时间戳

首页 > 解决方案 > 是否可以在视觉上水平而不是垂直显示行？

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

问题描述

我想显示一组彼此相邻的图像

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

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

标签： javascriptphpjquerydatatables

解决方案

您可以使用 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
}

或者，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
}

推荐阅读