html - 在内联 div 中嵌套 tds 会导致渲染问题吗？

Question

在桌面上，我将我的 div 设置为显示为表格单元格，但在移动设备上将它们更改为内联 block 。我选择在桌面上使用表格单元格，这样无论内容的高度如何，所有并排的 block 都是相同的高度。我想对移动设备和台式机之间的窗口大小间隔使用相同的表格单元格方法，但想并排显示两个带有分隔线的 block (而不是带有三个分隔线的四个并排 block )。我想知道在每对“响应元素”周围放置一个 div 并将每个 div 设置为桌面内联是否会导致页面呈现与它们不存在时不同。如果我没记错的话，如果这不会引起问题，我应该能够完成我打算完成的事情。

@media (max-width: 1199px) {
  .responsiveelement {
    width: 100% !important;
    margin: 0 0 20px !important;
    display: inline-block !important;
  }
  .responsivetable {
    display: block !important;
    margin: 0 !important;
  }
  .celldivider {
    display: none;
  }
}

.celldivider {
  display: table-cell;
}

.responsiveelement {
  display: table-cell;
  width: 23.5%;
}

<div class="table">
  <div class="table2">
    <div class="responsiveelement"></div>
    <div class="celldivider"></div>
    <div class="responsiveelement"></div>
  </div>
    <div class="celldivider middle"></div>
  <div class="table2">
    <div class="responsiveelement"></div>
    <div class="celldivider"></div>
    <div class="responsiveelement"></div>
  </div>
</div>

Answer 1

如果我理解正确，那么这应该可以工作:

HTML

<div>
 <div class='mobile_tr'> 
 <div class='td'>Text</div>
 <div class='td'>Text</div>
 </div>
 <div class='mobile_tr'>
 <div class='td'>Text</div>
 <div class='td'>Text</div>
 </div>
</div>

CSS

div {
  display: table
}

.mobile_tr {
  display: inline-block;
}

.td {
  display: table-cell;
}

@media (max-width: 1199px) {
  .mobile_tr {
    display: block;
  }
}

本质上，您将所有“单元格”按 2 分组，然后将换行呈现为 inline-block 元素，允许“单元格”连接成一行。当设备移动时，换行呈现为一个 block ，将下一个换行带到换行符。不幸的是，据我所知，没有唯一的 CSS 方法可以做到这一点。

编辑:简而言之，不 :P 你走在正确的轨道上。 :D