必须优先重构的TABLE有三类：一是嵌套div/section/nav等非表格元素，二是含width="100%"等HTML4布局属性，三是tr下直接包含h2/p/button等非法子元素；真实数据表须补thead/tbody、th表头及scope属性；伪表格宜用flex替代，注意避免float/inline-block、合理使用gap和margin-left:auto；响应式需加视觉提示、fixed布局及移动端内容重构。
哪些TABLE必须优先重构
不是所有
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
都要动，但以下三类结构一出现，就得立刻处理：
-
table 里嵌了 div、section 或 nav —— 说明它根本不是数据表，只是被当“布局容器”用了
- 存在
width="100%"、cellpadding="5"、valign="middle" 这类 HTML4 属性 —— 这是语义退化和样式失控的明确信号
-
tr 下直接有 h2、p、button 等非 th/td 元素 —— 浏览器会自动修复 DOM，但修复结果不可控，DevTools 里常看到结构错位
保留TABLE但必须补的语义项
真实数据表（如课程表、API 字段说明）不该删，但缺这些就等于没语义：
- 必须包裹
thead 和 tbody，哪怕只有 1 行表头 —— 否则屏幕阅读器无法区分标题与内容
- 表头单元格必须用
th，不能用 td + font-weight: bold 模拟 —— th 自带 scope 推断能力，辅助技术靠它关联行列
- 复杂表需显式声明
scope="col" 或 scope="row"，特别是含 rowspan/colspan 的表头 —— 否则读屏软件可能把“姓名”列误读为整行标题
用flex替换伪表格时的关键避坑点
单行/单列“假装是表格”的结构（比如图标+文字+按钮横向排列），display: flex 是最平滑的替代方案，但容易翻车的地方很具体：
- 别给子元素设
float 或 inline-block —— flex 容器内这些声明会被忽略，且可能触发怪异的基线对齐
- 用
align-items: center 替代 valign="middle"，它对混合高度内容（图标+多行文本）更稳定
- 用
gap 控制间距，别在每个子元素上写 margin-right —— 否则最后一个元素会多出空白，还得额外加 :last-child { margin-right: 0 }
- 右对齐最后一项，用
margin-left: auto 作用于该子元素，而不是靠 text-align: right 或套 wrapper —— 后者会破坏 flex 的流式响应行为
响应式表格不能只靠 overflow-x
很多人给 table 外层加 overflow-x: auto 就算完成响应式，但这只是“能看”，不是“好用”：
立即学习“前端免费学习笔记（深入）”；
- 小屏下横向滚动本身反直觉，用户常找不到可滑动区域 —— 必须加视觉提示，比如左右阴影或箭头 icon
-
table-layout: fixed 配合 width: 100% 才能防止列宽随内容撑开，否则某些列在窄屏下会挤成一团
- 真正难的是内容取舍：移动端不该显示“操作”列，但直接
display: none 会让键盘焦点跳过，应配合 aria-hidden="true" + tabindex="-1"
- 比隐藏更优的解法是用 CSS
@media 切换为 card 列表 —— 每行数据转为垂直堆叠的 div，用 grid-template-areas 重排字段顺序
重构最难的从来不是代码怎么写，而是判断哪块是“真表格”、哪块是“假布局”。一个 table 标签里混着语义正确和误用的两种逻辑，改一半反而更糟。先做语义审计，再动手。
