如何在响应式设计中让表格单元格任意堆叠为2×2布局？

嘿，太懂你这种“明知不可为而为之”的需求了——明明表格天生就不适合响应式场景，但就是得硬凑出4个单元格小屏2×2的效果，还不想用空td那种冗余的hack，对吧？

我之前也折腾过类似的需求，给你两个干净纯CSS的解决方案，完全不需要额外标记：

方案1：CSS Grid 布局（推荐） #

直接把表格容器改成Grid布局，在小屏幕下指定2列，4个单元格会自动排列成2×2，逻辑超清晰：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

/* 大屏幕保持正常表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

/* 小屏幕触发2×2布局 */
@media (max-width: 600px) {
  table {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 强制2列 */
    gap: 6px; /* 可选，添加单元格间距 */
  }
  td {
    /* 可以根据需求调整单元格内的对齐方式 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

方案2：Flexbox 布局 #

如果更习惯用Flex，也可以把表格改成弹性盒容器，让每个单元格占50%宽度，自动换行：

@media (max-width: 600px) {
  table {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  td {
    flex: 1 1 calc(50% - 12px); /* 减去gap的总宽度，避免溢出 */
    box-sizing: border-box; /* 确保padding和边框不占额外宽度 */
  }
}

这两种方法都完全不需要额外的空td标记，既保持了HTML的语义化，又能精准实现你要的2×2堆叠效果。而且后续要调整列数或者间距，直接改CSS参数就行，维护起来也方便。

内容的提问来源于stack exchange，提问作者jugglervr