表格单元格位置适应表格单元格大小。可能吗？

Question

我是一个相对较新的Web开发人员，我通常会在这些情况下使用flex-box。 我必须为此项目使用表，因为我自定义的液体模板使用display:table;。

我想让图像重新定位并关闭单元格之间的空白。 它甚至可以在表格布局中使用吗？ 我分享了屏幕截图的SCSS片段以给出一个想法。 对于样式我很抱歉，在嵌套代码方面，我仍然遇到堆栈溢出编辑器的一些问题。您可以使用边框颜色匹配类。

.collection-products{
    border:2px solid rgba(222,45,67);

    &:after{
    display: table;
    content: '';
    clear: both;

.collection-product{
    border:1px solid blue; 

    display: block;
    position: relative;
    text-decoration: none;
    float: left;
    width: 25%;
    padding-left: $products_padding;
    margin-bottom: $products_padding;
    -webkit-tap-highlight-color: rgba($color_product_bg, 0.2);

    .table{
    border:1px solid green;

    display: table;
    table-layout: fixed;
    width: 100%;
    height: 150px; // this behaves as min-height
    .cell{
      border:1px solid red;

      display: table-cell;
      vertical-align: middle;
      img{
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        @include default-transition(opacity);
      }

 }//close .cell
 }//close .table

 }//close .collection-product
 }//close .collection-products

用于演示想要效果的屏幕截图。

我读过关于桌子但我无法找到这个问题的答案。 任何帮助都会得到满足。