本文介绍如何仅通过 css 将多行多列的 html 表格（如 2×3）在小屏幕下视觉重构为单列布局，使单元格按“第1行第1列、第2行第1列、第1行第2列、第2行第2列…”的交错顺序垂直排列，无需修改 html 结构。
本文介绍如何仅通过 css 将多行多列的 html 表格（如 2×3）在小屏幕下视觉重构为单列布局，使单元格按“第1行第1列、第2行第1列、第1行第2列、第2行第2列…”的交错顺序垂直排列，无需修改 html 结构。
要实现表格内容从「行优先」到「列优先」的视觉重排（即：原表格中第1行[1,3,5]与第2行[2,4,6]交错合并为[1,2,3,4,5,6]的单列），关键在于脱离表格默认渲染流，利用 CSS Grid 的 order 属性控制子元素显示顺序。由于
✅ 推荐方案（语义清晰、可扩展、兼容性好）：
/* 将 table 变为 grid 容器 */
table {
display: grid;
grid-auto-flow: row; /* 默认即可，显式声明更明确 */
}
/* 让 tbody 和 tr “消失” —— 使其子元素（td）成为 table 的直系子项 */
table > tbody,
table > tr,
table tbody > tr {
display: contents;
}
/* 按列号设置 order：第1列所有 td 排最前，第2列次之，依此类推 */
/* 动态适配任意列数：nth-child(n) → order: n */
td:nth-child(1) { order: 1; }
td:nth-child(2) { order: 2; }
td:nth-child(3) { order: 3; }
/* 如需支持更多列，继续添加... */
/* td:nth-child(4) { order: 4; } */
配合媒体查询，可实现响应式切换：
/* 默认：桌面端保持表格布局 */
table { display: table; }
/* 小屏：启用 Grid 重排 */
@media (max-width: 768px) {
table {
display: grid;
}
table > tbody,
table > tr,
table tbody > tr {
display: contents;
}
/* 后续 order 规则同上 */
}
⚠️ 注意事项：
- display: contents 在
上的支持虽已标准化，但旧版 Safari（≤15.4）存在兼容性问题；建议加 -webkit-display: contents 前缀或通过 @supports 特性检测降级。 - order 值必须为整数，且需覆盖所有可能的列数——若列数动态变化，需预设足够大的 nth-child(n) 规则（如支持最多 12 列，则写到 nth-child(12)），或结合 CSS 自定义属性 + JavaScript 动态注入（但题目限定纯 CSS，故预设是务实选择）。
- 此方案仅改变视觉顺序，DOM 结构与语义保持不变，对屏幕阅读器友好（读取顺序仍按源码），如需同步语义重排，应改用
+ Grid 替代。
❌ 不推荐的“hack 方案”（仅作技术参考）： 通过 grid-area: 1/1 强制两行
重叠，并用 align-items: end 错位显示内容，依赖固定行高（如 2lh），极易因字体、缩放、内边距导致错位，维护性差且不可靠，应避免在生产环境使用。 总结：纯 CSS 实现表格行列转置的核心是 display: grid + display: contents（作用于 tbody/tr）+ order 按列索引排序。该方案简洁、可预测、符合现代 CSS 设计理念，是响应式表格重构的首选实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
