HTML多级表头必须用<thead>内多行<tr>配合rowspan和colspan实现，禁止嵌套<table>；否则浏览器会修正DOM导致结构错乱、样式失效、导出异常。
HTML 表格多级表头不是靠“嵌套 <table>”实现的，而是靠 <thead> 内多行 <tr> 配合 rowspan 和 colspan 控制单元格跨行跨列——这是唯一语义正确、浏览器兼容、导出 Excel 也能保留结构的方式。
为什么不能在 <tr> 里直接放 <table>
浏览器会强制修正 DOM 结构：<tr> 只允许子元素为 <th> 或 <td>。一旦你写成：
<tr> <table><tr><th>子表头</th></tr></table> </tr>
浏览器会把那个 <table> “踢”到父 <table> 外面，或塞进隐式 <tbody>，导致 JS 查不到、CSS 选不中、打印错位。
- 现象：子表头显示在主表上方/下方，而不是某列正上方
- 现象：
document.querySelector('tr > table')返回null - 现象：给
tr > table写的样式完全不生效
rowspan 和 colspan 怎么配平总列数
每一行 <tr> 在 <thead> 中的“逻辑列数”必须和 <tbody> 保持一致，否则表格会错位甚至被浏览器自动补空单元格。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 先算清最终有多少数据列（比如 6 列），再倒推每层表头怎么拆分
- 第一行用
colspan合并大类（如<th colspan="3">主科</th>），第二行再细分（<th>语文</th><th>数学</th><th>英语</th>） - 需要跨行的标题（如“姓名”）必须用
rowspan="3"，且后续两行对应位置要跳过，不能重复写<th> - 常见错误：某行
<th>加起来列数 ≠ 6 → 浏览器自动补<td>，导致 tbody 数据列偏移
三层及以上表头容易踩的坑
超过两层后，手算 rowspan/colspan 极易出错，而且屏幕阅读器对深层 <thead> 支持有限。
- 别指望
<th rowspan="3">自动“穿透”到第三行 —— 它只占前两行高度，第三行必须有对应<th>占位 - 移动端小屏下，多层表头常换行错乱，建议加
white-space: nowrap或用 CSSmin-width控制 - 用 JS 动态生成时，务必校验每行
th的colspan总和是否等于目标列数，否则导出 Excel 时合并单元格会失效 - Ant Design Vue 或 Element Plus 的
a-table/el-table虽支持配置式多级表头，但底层仍是渲染成标准<thead><tr><th>结构，别绕开它自己拼 DOM
真正麻烦的不是写法，是规划——画张草图，标清每层跨几列、跨几行，再动键盘。少一行 <th>，整个表头就塌一半。
