动态生成HTML表格时数据完整性取决于结构严格闭合、语义准确和循环边界清晰：table标签须包裹整个数据循环，thead/tbody/tfoot须完整且顺序固定，colspan/rowspan需精确计算，禁用display:block模拟表格，重构前须通过W3C验证器校验。
动态生成的 HTML 表格一旦重构，最容易丢的是数据——不是样式错位，也不是列宽跑偏，而是某一行 td 漏闭合、某个 tr 被拼在了 外面，或者 colspan 数算错导致后续所有列全部偏移。数据完整性不靠“看起来对”，而靠结构严格闭合、语义准确、循环边界清晰。
表格标签不能嵌套在循环内部
这是最常踩的坑：PHP/JS/T-SQL 中把 放在每轮数据循环里，结果浏览器只认第一个 <table>...</table>，后面全是游离的 tr 和文本，直接扔到 DOM 根节点下渲染——你看到的“多行”其实是多个独立 tr，根本不在表格内。
正确做法是：
-
<table> 和 <code>必须包裹整个数据循环，不能出现在循环体中 - 循环内只生成
<tr><td>...</td></tr>，且每个td必须成对闭合 - 如果用 T-SQL 的
FOR XML拼接，确保@tableHTML变量开头是<table>，结尾是 <code>，中间只插入<tbody>...</tbody>内容
thead/tbody/tfoot 必须完整且顺序固定
浏览器解析表格时，会按 thead → tbody → tfoot 顺序处理；如果缺 tbody，部分引擎会自动补一个，但列对齐和样式继承可能失效；如果 tfoot 写在 tbody 前面，某些旧版 Safari 会忽略它。
立即学习“前端免费学习笔记（深入）”；
关键约束：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
thead必须包含至少一行tr，且其中每个单元格都应是th -
tbody不可省略——哪怕只有一行数据，也要显式包裹<tbody><tr>...</tr></tbody> -
tfoot若存在，必须放在tbody之后（不是之前），且不能跨多个tbody
colspan/rowspan 错位会连锁破坏整行结构
合并单元格本身不危险，危险的是计算错误后没补足剩余单元格。比如一行本该有 5 列，你在第一个 td 上写 colspan="2"，后面却只写了 3 个 td，那这一行实际只有 4 列，下一行就会整体左移一格——这种错位不会报错，但数据和表头完全对不上。
检查要点：
- 每行
tr内所有td/th的colspan值加总，必须等于该表格定义的列数（可通过colgroup或首行th数确认） - 使用
rowspan时，被跨行的后续行中，对应位置必须留空（即不放td），否则会多出单元格 - 避免在
thead用rowspan后，tbody第一行没对齐——建议先画草图，标出每行实际单元格数
响应式重构时别用 display: block 模拟表格
为移动端把 table 强制设成 display: block，再用 data-label 伪元素“模拟”表头，看似能卡片化，实则彻底丢失表格语义：屏幕阅读器读不出行列关系，JavaScript 获取 rows.length 返回 0，排序/导出脚本全部失效。
真正保数据的响应式路径是：
- 小屏优先保留
table结构，用overflow-x: auto包裹容器（不是table自身） - 若必须卡片化，仅限纯展示型表格（无筛选、无排序、无导出需求），且
thead的th必须保留，并用scope属性标明作用范围 - 禁用任何删除
tr/td或用div替换语义标签的方案——结构塌了，数据就散了
最易被忽略的一点：数据完整性不体现在 CSS 里，而在每一行 HTML 是否通过 W3C 验证器——哪怕只是少了一个 ，都可能导致后续所有行解析错乱。重构前先复制生成的 HTML 到 validator.w3.org 跑一遍，比调十次样式更省时间。
