如何通过CSS实现移动端2D表格按列依次堆叠为1D形式展示

直接将以下代码复制到你已有的媒体查询规则块内即可生效：

/* 你原有已定义的媒体查询 */
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
  /* 重置表格默认布局规则 */
  table, tbody, tr, td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* 将表格设置为单列网格布局，按order值排序元素 */
  table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px; /* 不同列组的间距，可自行调整 */
  }

  /* 取消tr的布局占位，让td直接参与表格的网格排序 */
  tr {
    display: contents;
  }

  /* 按列设置排序优先级，第一列优先级最高排最前，以此类推 */
  td:nth-child(1) { order: 1; }
  td:nth-child(2) { order: 2; }
  td:nth-child(3) { order: 3; }
  td:nth-child(4) { order: 4; }

  /* 可选：优化单元格展示样式，可根据自身需求修改 */
  td {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
  }

  /* 可选：给每列的第一个单元格（原表头行的单元格）加特殊样式区分 */
  tr:first-child td {
    font-weight: 600;
    background-color: #f3f4f6;
  }
}

适配说明 #

• 如果你表格列数不是4列，按上面td:nth-child(n)的规则补全对应列的order配置即可
• 如果你的表格使用<th>做表头，把选择器里的td替换成th, td即可正常适配
• 桌面端原有表格样式不受任何影响，只有符合媒体查询条件的小屏设备会生效
• 如果不需要列组之间的间距，删掉table的gap属性即可

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