表格层级混乱是结构失效而非样式问题，需通过DevTools检查语义标签是否被正确解析、用JS验证tHead/tBodies是否存在、扁平化嵌套、校验每行cells.length一致性，并同步更新CSS选择器、索引逻辑和data-label。

表格层级混乱不是样式问题，是结构失效的信号——、、缺失或错位，会导致屏幕阅读器跳过表头、打印不重复标题、JS遍历rows时漏行，甚至让colspan/rowspan逻辑彻底崩坏。

怎么一眼识别/ 是否真的在起作用

别只看有没有标签，要看它们是否被浏览器当作语义锚点解析。打开 DevTools Elements 面板，展开

，观察子节点顺序和折叠状态：

• 如果

没自动高亮、或展开后里面没有（而是直接塞了节点是灰色虚线、或根本没渲染出来（只显示平铺在

），说明它被当成普通容器，可能被CSS设了display: block或父级有flex干扰

如果

下），大概率是HTML解析失败：比如写在了外但又没包进，浏览器会自动补一个隐式，但DOM里你看不见它

用document.querySelector('table').tHead和tBodies在控制台查——返回null或空数组，就证明标签存在但未被识别

嵌套超过三层的

必须拆，不是优化而是纠错

像

...这种结构，不是“写得复杂”，是语义链断裂。浏览器仍能渲染，但querySelectorAll('table tbody tr')可能返回空，NVDA读表时直接跳过中间层，低端机上offsetHeight读取还会触发强制同步布局。

• 先运行这段脚本定位病灶：Array.from(document.querySelectorAll('table')).filter(t => t.querySelectorAll('table').length > 0)，找出所有含子表格的

对纯布局型子表格（无

、无真实数据、父级已用grid或flex），直接删掉整个标签块，把内容提到父，用CSS:has()或JS控制展开/折叠，而非依赖DOM嵌套

colspan/rowspan错位时，别修单元格，先验顶层结构

colspan="2"导致后续列偏移，往往不是这个

没对齐——比如第一行中每一行的cells.length是否相等，不等就说明表头本身已失衡

用document.querySelector('thead').rows[0].cells.length得到“理论列数”，再遍历tbody.rows，比对每行cells.length，不一致的行就是修复目标

修复优先级：先补全

的缺失单元格（哪怕内容为空），再调整tbody中对应位置的colspan/rowspan，最后删掉所有 或空外一层，需同步更新为tbody .status-cell或加!important临时兜底

JS依赖rowIndex/cellIndex的逻辑：比如排序时按tr[0].cells[2]取值，但

补上后，原来第0行变成第1行，索引全偏移

data-label没随

里第3列是“操作”，但旧

里 对真数据型嵌套（如“订单表→订单项表→SKU明细表”），必须扁平化：把三级结构转成带data-group属性的单层
写错了，而是它上面的
，第二行却只有1个		，浏览器会默默补空单元格，但JS遍历时row.cells.length和视觉列数就不一致。 检查
占位符 重构后最常静默失效的三处地方 结构改完页面看起来没问题，但某些功能已经断了，且不报错： CSS选择器失效：原写table .status-cell，重构后.status-cell移到
重排同步更新：新
还在用老名字，导致小屏下伪元素显示空白或屏幕阅读器读错字段 真正难的不是把标签补全，而是让每一处rowIndex、cellIndex、data-label、CSS类名都跟新结构对齐——这些地方不会报错，只会让功能在某次用户操作后突然失灵。 DeepBI DHTML 页面生成器 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur 下载