必须补全和，因缺失会导致屏幕阅读器误读表头、动态加载漏行、JS选择器失效；须紧贴开头；table-layout:fixed需width、th宽度、white-space等三前提；必须设scope属性保障可访问性。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
HTML表格重构不是重写样式，而是从语义结构、可访问性、响应式行为三方面系统性修正——缺了 <thead> 或 <code><tbody>，哪怕CSS再漂亮，屏幕阅读器就读错、移动端就溢出、JS操作就漏行。<h3>为什么必须补全 <code><thead> 和 <code><tbody><p>浏览器默认把第一行 <code><tr> 当作普通数据；没有 <code><thead>，NVDA/JAWS 就不会把它识别为列头，用户听到的是“张三，28，北京”，而不是“姓名：张三，年龄：28”。没有 <code><tbody>，动态插入新行（比如分页加载）时，<code>document.querySelectorAll('tbody tr') 会漏掉内容，因为 DOM 中根本没这个父容器。
- 检查现有 HTML：若只有
<table> <tr><th>...</th></tr> <tr><td>...</td></tr> </table>，必须手动包裹<thead> 和 <code><tbody><li> <code><caption></caption>必须紧贴<table> 开始，不能放在 <code><div> 里或丢到末尾<li>已有 JS 绑定 <code>tr的逻辑（如点击高亮），需同步更新选择器为'tbody tr'或'table tbody tr' - 必须同时声明
width: 100%（或具体像素值），table-layout: fixed在width: auto下不触发列宽计算 <th> 上必须显式设置 <code>width（百分比或固定值），例如th:nth-child(1) { width: 15%; }；未设宽度的列会被压缩到内容最小宽<th> 和 <code><td> 需统一加 <code>white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，否则长文本撑开列宽，破坏 fixed 布局<th> 的 <code>scope属性不能省略只用
<th> 不等于可访问。屏幕阅读器靠 <code>scope判断该表头管哪一列/行。没有它，读表时无法关联“年龄”和“28”。立即学习“前端免费学习笔记（深入）”；
- 列标题一律用
<th scope="col">姓名</th> - 首列为行标题（如带操作按钮的列表）时，该列所有
<th> 用 <code>scope="row" - 避免在
<th> 上只写 <code>aria-label或title：这些是补充，不是替代；DOM 解析器优先认scope警惕框架封装组件的 DOM 假象
Directus、Element Plus、Ant Design 的
v-table/el-table/Table组件，底层常把<tr> 渲染成 <code><div role="row">。这不是真表格，ARIA 再全也过不了 WCAG 1.3.1（信息与关系）。<ul><li>重构前先用 DevTools 查看真实 DOM：如果没 <code><table> <thead></thead> <tbody> 结构，就得放弃组件，手写原生 <code><table><li>排序箭头若用 <code>::after插在<th> 里，必须同步加 <code>scope="col"，否则辅助技术看不到“已按姓名升序”状态 - 分页栏不能挂在表格外的
<div class="pagination">，得放进 <code><tfoot>，保持语义闭环<p>最难的不是补上那几个标签，而是让每一列的 <code>width值在不同设备、不同数据长度下都稳得住——比如“操作”列锁死80px，“描述”列用calc(100% - 240px)，但这个 calc 必须作用在<th> 上，而不是父容器的 CSS 类里。</th>
- 列标题一律用
table-layout: fixed 生效的三个硬性前提
设了 table { table-layout: fixed; } 却没效果？大概率是下面某条没满足：
