必须补全和，因缺失会导致屏幕阅读器误读表头、动态加载漏行、JS选择器失效；须紧贴开头；table-layout:fixed需width、th宽度、white-space等三前提；必须设scope属性保障可访问性。

HTML表格重构不是重写样式，而是从语义结构、可访问性、响应式行为三方面系统性修正——缺了 或 ，哪怕CSS再漂亮，屏幕阅读器就读错、移动端就溢出、JS操作就漏行。

为什么必须补全 和

浏览器默认把第一行 当作普通数据；没有 ，NVDA/JAWS 就不会把它识别为列头，用户听到的是“张三，28，北京”，而不是“姓名：张三，年龄：28”。没有 ，动态插入新行（比如分页加载）时，document.querySelectorAll('tbody tr') 会漏掉内容，因为 DOM 中根本没这个父容器。

• 检查现有 HTML：若只有

  ...

  ...

  ，必须手动包裹 和
• 必须紧贴 开始，不能放在
  里或丢到末尾

  已有 JS 绑定 tr 的逻辑（如点击高亮），需同步更新选择器为 'tbody tr' 或 'table tbody tr'

  table-layout: fixed 生效的三个硬性前提

  设了 table { table-layout: fixed; } 却没效果？大概率是下面某条没满足：

  • 必须同时声明 width: 100%（或具体像素值），table-layout: fixed 在 width: auto 下不触发列宽计算
  首列为行标题（如带操作按钮的列表）时，该列所有
  渲染成
  。这不是真表格，ARIA 再全也过不了 WCAG 1.3.1（信息与关系）。

  • 重构前先用 DevTools 查看真实 DOM：如果没

  上必须显式设置 width（百分比或固定值），例如 th:nth-child(1) { width: 15%; }；未设宽度的列会被压缩到内容最小宽	和	需统一加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，否则长文本撑开列宽，破坏 fixed 布局	的 scope 属性不能省略 只用	不等于可访问。屏幕阅读器靠 scope 判断该表头管哪一列/行。没有它，读表时无法关联“年龄”和“28”。 列标题一律用	姓名	用 scope="row" 避免在	上只写 aria-label 或 title：这些是补充，不是替代；DOM 解析器优先认 scope 警惕框架封装组件的 DOM 假象 Directus、Element Plus、Ant Design 的 v-table / el-table / Table 组件，底层常把

  结构，就得放弃组件，手写原生
  排序箭头若用 ::after 插在
  ，保持语义闭环

  最难的不是补上那几个标签，而是让每一列的 width 值在不同设备、不同数据长度下都稳得住——比如“操作”列锁死 80px，“描述”列用 calc(100% - 240px)，但这个 calc 必须作用在

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载
  里，必须同步加 scope="col"，否则辅助技术看不到“已按姓名升序”状态

  分页栏不能挂在表格外的

  ，得放进

  上，而不是父容器的 CSS 类里。