真表格需满足三条件：数据可行列读取、表头用scope明确关联、存在真实二维关系；否则为伪表格，应改用flex布局或语义化HTML结构。
先判断是不是真表格：用 前必须问三句话不是所有带格子的结构都该用 。重构第一步，是停手、看语义：
• 里面的数据能不能被屏幕阅读器按行列读出来？
• 表头有没有用 或 明确关联？
• 是否存在真实二维关系（比如“2023年Q1销售额”对应“华东区”）？
只要有一条答不上来，它大概率是“伪表格”——比如导航栏、卡片列表、表单行、图标+文字组合——这类必须换掉，不能修修补补。伪表格怎么替换成 flex：三步收掉老 套路典型误用：
@@######@@ 替代 valign="middle" 和手动 margin
• 子元素去掉 float、inline-block、vertical-align —— 这些在 flex 容器里无效
• 最后一项右对齐？给它加 margin-left: auto;，别用 text-align: right 包一层
注意：gap 不兼容 IE11，若需支持，改用 margin-right 并手动清除最后一项的 margin。
真表格怎么优化：保留 但必须加语义和可访问性财务报表、课程表、API 返回的 JSON 渲染结果——这些该留，但不能裸留：
• 必须包裹
• 表头用 ，行标题用 ，别全用
• 合并单元格慎用：rowspan/colspan 超过 2 层，会极大增加读屏复杂度
• 禁止内联样式如 width="50%"、align="center"，统一走 CSS：table-layout: fixed; + width: 100% 控制整体，min-width 控制列响应式表格卡住了？别硬塞 overflow-x，试试更可控的方案
小屏下表格横向滚动体验差，且焦点键盘操作容易丢失。替代路径：
• 单行数据量不大（≤5 列）：用 @media (max-width: 768px) 把 改成 display: block， 变成 display: flex + flex-direction: column，每项显示为“标签：值”
• 列多且关键（如后台数据列表）：优先加列筛选或搜索，而不是强行展示全部列
• 绝对避免
真正难的不是写代码，是每次改 前，得先想清楚：这东西到底是不是给人读的、读的人能不能搞清行列关系、改完之后键盘用户还能不能一行行 tab 过去。漏掉这个，后面所有 CSS 和 JS 都是白忙。
display: flex; align-items: center; gap: 8px;
或 |
|---|
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
