表格层级混乱是结构失效而非样式问题，需通过DevTools检查语义标签是否被正确解析、用JS验证tHead/tBodies是否存在、扁平化嵌套、校验每行cells.length一致性，并同步更新CSS选择器、索引逻辑和data-label。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
表格层级混乱不是样式问题，是结构失效的信号——<thead>、<code><tbody>、<code><tfoot>缺失或错位，会导致屏幕阅读器跳过表头、打印不重复标题、JS遍历<code>rows时漏行，甚至让colspan/rowspan逻辑彻底崩坏。
怎么一眼识别/
是否真的在起作用
别只看有没有标签，要看它们是否被浏览器当作语义锚点解析。打开 DevTools Elements 面板，展开<table>，观察子节点顺序和折叠状态：
<ul><li>如果<code><thead>没自动高亮、或展开后里面没有<code><tr>（而是直接塞了<code><th>），说明它被当成普通容器，可能被CSS设了<code>display: block或父级有flex干扰
如果<tbody>节点是灰色虚线、或根本没渲染出来（只显示<code><tr>平铺在<code><table>下），大概率是HTML解析失败：比如<code><tr>写在了<code><thead>外但又没包进<code><tbody>，浏览器会自动补一个隐式<code><tbody>，但DOM里你看不见它
<li>用<code>document.querySelector('table').tHead和tBodies在控制台查——返回null或空数组，就证明标签存在但未被识别
嵌套超过三层的
必须拆，不是优化而是纠错
像<table><tr><td><table><tr><td><div><table>...这种结构，不是“写得复杂”，是语义链断裂。浏览器仍能渲染，但<code>querySelectorAll('table tbody tr')可能返回空，NVDA读表时直接跳过中间层，低端机上offsetHeight读取还会触发强制同步布局。
- 先运行这段脚本定位病灶：
Array.from(document.querySelectorAll('table')).filter(t => t.querySelectorAll('table').length > 0)，找出所有含子表格的<table><li>对纯布局型子表格（无<code><thead>、无真实数据、父级已用<code>grid或flex），直接删掉整个<table>标签块，把内容提到父<code><td>里
<li>对真数据型嵌套（如“订单表→订单项表→SKU明细表”），必须扁平化：把三级结构转成带<code>data-group属性的单层<tbody>，用CSS<code>:has()或JS控制展开/折叠，而非依赖DOM嵌套
colspan/rowspan错位时，别修单元格，先验顶层结构
colspan="2"导致后续列偏移，往往不是这个<td>写错了，而是它上面的<code><thead>没对齐——比如第一行<code><th colspan="2">，第二行却只有1个<code><th>，浏览器会默默补空单元格，但JS遍历时<code>row.cells.length和视觉列数就不一致。
立即学习“前端免费学习笔记（深入）”；
- 检查
<thead>中每一行的<code>cells.length是否相等，不等就说明表头本身已失衡
- 用
document.querySelector('thead').rows[0].cells.length得到“理论列数”，再遍历tbody.rows，比对每行cells.length，不一致的行就是修复目标
- 修复优先级：先补全
<thead>的缺失单元格（哪怕内容为空），再调整<code>tbody中对应位置的colspan/rowspan，最后删掉所有 或空<td>占位符
<h3>重构后最常静默失效的三处地方</h3>
<p>结构改完页面看起来没问题，但某些功能已经断了，且不报错：</p>
<ul><li>CSS选择器失效：原写<code>table .status-cell，重构后.status-cell移到<tbody>外一层，需同步更新为<code>tbody .status-cell或加!important临时兜底
- JS依赖
rowIndex/cellIndex的逻辑：比如排序时按tr[0].cells[2]取值，但<thead>补上后，原来第0行变成第1行，索引全偏移
<li>
<code>data-label没随<th>重排同步更新：新<code><thead>里第3列是“操作”，但旧<code><td data-label="编辑">还在用老名字，导致小屏下伪元素显示空白或屏幕阅读器读错字段
<p>真正难的不是把标签补全，而是让每一处<code>rowIndex、cellIndex、data-label、CSS类名都跟新结构对齐——这些地方不会报错，只会让功能在某次用户操作后突然失灵。
<table>，观察子节点顺序和折叠状态：
<ul><li>如果<code><thead>没自动高亮、或展开后里面没有<code><tr>（而是直接塞了<code><th>），说明它被当成普通容器，可能被CSS设了<code>display: block或父级有flex干扰
<tbody>节点是灰色虚线、或根本没渲染出来（只显示<code><tr>平铺在<code><table>下），大概率是HTML解析失败：比如<code><tr>写在了<code><thead>外但又没包进<code><tbody>，浏览器会自动补一个隐式<code><tbody>，但DOM里你看不见它
<li>用<code>document.querySelector('table').tHead和tBodies在控制台查——返回null或空数组，就证明标签存在但未被识别像<table><tr><td><table><tr><td><div><table>...这种结构，不是“写得复杂”，是语义链断裂。浏览器仍能渲染，但<code>querySelectorAll('table tbody tr')可能返回空，NVDA读表时直接跳过中间层，低端机上offsetHeight读取还会触发强制同步布局。
- 先运行这段脚本定位病灶：
Array.from(document.querySelectorAll('table')).filter(t => t.querySelectorAll('table').length > 0)，找出所有含子表格的<table><li>对纯布局型子表格（无<code><thead>、无真实数据、父级已用<code>grid或flex），直接删掉整个<table>标签块，把内容提到父<code><td>里 <li>对真数据型嵌套（如“订单表→订单项表→SKU明细表”），必须扁平化：把三级结构转成带<code>data-group属性的单层<tbody>，用CSS<code>:has()或JS控制展开/折叠，而非依赖DOM嵌套colspan/rowspan错位时，别修单元格，先验顶层结构
colspan="2"导致后续列偏移，往往不是这个<td>写错了，而是它上面的<code><thead>没对齐——比如第一行<code><th colspan="2">，第二行却只有1个<code><th>，浏览器会默默补空单元格，但JS遍历时<code>row.cells.length和视觉列数就不一致。立即学习“前端免费学习笔记（深入）”；
- 检查
<thead>中每一行的<code>cells.length是否相等，不等就说明表头本身已失衡 - 用
document.querySelector('thead').rows[0].cells.length得到“理论列数”，再遍历tbody.rows，比对每行cells.length，不一致的行就是修复目标 - 修复优先级：先补全
<thead>的缺失单元格（哪怕内容为空），再调整<code>tbody中对应位置的colspan/rowspan，最后删掉所有<td>占位符 <h3>重构后最常静默失效的三处地方</h3> <p>结构改完页面看起来没问题，但某些功能已经断了，且不报错：</p> <ul><li>CSS选择器失效：原写<code>table .status-cell，重构后.status-cell移到<tbody>外一层，需同步更新为<code>tbody .status-cell或加!important临时兜底 - JS依赖
rowIndex/cellIndex的逻辑：比如排序时按tr[0].cells[2]取值，但<thead>补上后，原来第0行变成第1行，索引全偏移 <li> <code>data-label没随<th>重排同步更新：新<code><thead>里第3列是“操作”，但旧<code><td data-label="编辑">还在用老名字，导致小屏下伪元素显示空白或屏幕阅读器读错字段 <p>真正难的不是把标签补全，而是让每一处<code>rowIndex、cellIndex、data-label、CSS类名都跟新结构对齐——这些地方不会报错，只会让功能在某次用户操作后突然失灵。
- 检查
