多级表头必须用<thead>内多行<tr>配合rowspan/colspan实现，禁止嵌套表格；每行<th>的colspan总和须等于总列数；需用<colgroup>控制列宽边框，并显式声明border-bottom/right；固定表头需<thead>为直接子元素、<tbody>设max-height及overflow-y:auto。
多级表头不是靠嵌套表格实现的，而是用 <thead> 里多行 <tr> 配合 rowspan 和 colspan 精确控制跨行跨列，这是唯一语义正确、导出 Excel 不错乱、屏幕阅读器能识别的方式。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
必须用 <thead> 多行 <tr> 搭配 rowspan/colspan
浏览器只允许 <tr> 的子元素是 <th> 或 <td>。如果在 <tr> 里塞一个 <table>，DOM 会被自动修正：那个子表格会被“踢”出 <tr>，可能跑到 <table> 外面或塞进隐式 <tbody>。结果就是 JS 查不到、CSS 选不中、打印错位、导出 Excel 表头塌陷。
-
document.querySelector('tr > table')一定返回null - 给
tr > table写的样式完全不生效 - 子表头显示在主表上方或下方，而不是某列正上方
每行 <th> 的 colspan 总和必须严格等于总列数
比如表格共 10 列，那么 <thead> 里每一行 <tr> 中所有 <th> 的 colspan 加起来必须是 10。少一个，浏览器会自动补空 <td>；多一个，就会挤偏后续列。
- 第一行用
colspan合并大类（如<th colspan="4">经营指标</th><th colspan="3">财务指标</th>） - 第二行再拆分对应列（如
<th>营收</th><th>毛利</th><th>费用</th><th>净利</th><th>应收</th><th>应付</th><th>现金流</th>） - 跨行标题（如左侧“部门”）要用
rowspan="3"，且它所在列在第二、第三行必须留空，不能重复写<th>
用 <colgroup> 控制列宽与边框，避免分割线断裂
仅设 border-collapse: collapse 不够。如果某格没定义 border-bottom，合并时就会“吃掉”邻格的线，导致横线断开。
-
<colgroup>必须紧贴<table>开始标签之后，例如：<colgroup> <col style="width: 60px; border-right: 1px solid #ddd"> <col style="width: 120px; border-right: 1px solid #ddd"> <col style="width: 80px"> </colgroup>
- 所有
<th>和<td>都要显式声明border-bottom和border-right（哪怕设为none） - 表头最后一行可加粗底边：
<tr class="header-last"><th style="border-bottom: 2px solid #000">...</th></tr>
固定表头 + 滚动内容需语义与样式协同
想让表头不动、内容能上下左右滚动，不能只靠 position: sticky。
-
<thead>必须是<table>的直接子元素，且<tbody>要有明确高度（如max-height: 400px; overflow-y: auto;） - 外层用
<div style="overflow-x: auto;">包裹整个<table>，解决横向滚动 -
<thead> th加position: sticky; top: 0; background: white; z-index: 1; - 若需兼容旧版 Safari 或打印，建议额外用
@media print { thead { display: table-header-group; } }
不复杂但容易忽略。
