复杂表头拖慢渲染主因是浏览器退回到table-layout:auto模式重排整表，而非单纯标签多；必须保留时应解耦结构与样式，用col定义列宽、scope锚定语义，并优先考虑grid+ARIA替代table。
为什么复杂表头会拖慢渲染？
不是因为 <th> 多，而是浏览器在解析时被迫做两件事：反复计算 colspan/rowspan 的逻辑边界，以及在没有 <code><colgroup></colgroup> 时退回到 table-layout: auto 模式重排整个表格。后者才是卡顿主因——哪怕只有 50 行，只要第一行 <th> 里嵌套了三层 <code>colspan="2" 和 rowspan="3"，浏览器就得为每列重新测量内容宽度、回溯父级范围、再校验语义合法性。
必须保留多级表头时，怎么写才不崩？
核心是把“结构描述”和“视觉呈现”解耦：用 <colgroup></colgroup> 定义物理列宽，用 scope 属性锚定语义关系，把真正跨行跨列的逻辑压到最顶层。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<thead> 必须是 <code><table> 的第二个子元素（<code><caption></caption>之后），否则 Safari 下position: sticky失效、打印丢表头、JS 获取tbody返回空- 多级表头只用两层
<tr>：第一行声明分组（如 <code><th colspan="3" scope="colgroup">产品类别），第二行声明具体列（如 <code><th scope="col">ID、<code><th scope="col">名称） <li>所有 <code>colspan都要对应<colgroup span="N"></colgroup>，例如<th colspan="2"> 上面必须有 <code><colgroup span="2"> <col> <col> </colgroup> - 禁用
<th width="120px"> 或 <code>style.width—— 这些在table-layout: fixed下不参与布局，纯属干扰调试移动端真不能撑多级表头？
能撑，但得主动降维。桌面端显示三层表头，移动端只保留最后一层（即实际数据列），其余用
data-label塞进单元格，靠 CSS 折叠或伪元素触发显示。- 在
<td> 上加 <code>data-label="Q1 销售 / 线上"，小屏下用::before { content: attr(data-label) }显示前缀 - 用
@media (max-width: 480px)隐藏中间层<tr>，只留最末层 <code><tr> 和 <code><tbody> <li>避免对 <code>rowspan做响应式切换——结构一旦变化，浏览器无法平滑过渡，容易整行错位 - 真机测试时打开 Chrome DevTools 的「Rendering」→「Paint flashing」，看哪些单元格滚动时高频重绘；重绘块越多，说明
col宽度定义越不稳定 - 用
<div role="grid"> 包裹，子元素用 <code>role="row"、role="columnheader"、role="gridcell" - 列宽由 CSS Grid 控制（
grid-template-columns: 15% 25% 1fr），不再依赖<col>或colspan - 屏幕阅读器仍能正确遍历行列关系，但浏览器不用再解析嵌套
<tr> 的父子依赖 <li>注意：这种写法需手动处理键盘导航（<code>Tab/Arrow）和焦点管理，不能完全丢给浏览器
复杂表头最难优化的点，往往不在 HTML 写法本身，而在团队协作时没人敢动第一行
比删表头更有效的简化方案是什么？
不是砍结构，而是换载体。当表头层级 ≥3 或列数 ≥8 时，
<table> 已不是最优容器。改用 <code>display: grid+ 语义化role="grid"，配合aria-colcount和aria-rowcount，既能保持可访问性，又绕开 table 的 DOM 协议限制。立即学习“前端免费学习笔记（深入）”；
<tr> —— 因为它牵扯后端模板、i18n key 映射、甚至报表导出逻辑。所以真正的简化，是从接口层约定扁平字段名开始，而不是在前端拼命 patch colspan。</tr> - 在
