多级表头必须用内多行配合rowspan/colspan实现，禁止嵌套表格；每行的colspan总和须等于总列数；需用控制列宽边框，并显式声明border-bottom/right；固定表头需为直接子元素、设max-height及overflow-y:auto。
多级表头不是靠嵌套表格实现的，而是用 <thead> 里多行 <code><tr> 配合 <code>rowspan 和 colspan 精确控制跨行跨列，这是唯一语义正确、导出 Excel 不错乱、屏幕阅读器能识别的方式。
必须用 每行 固定表头 + 滚动内容需语义与样式协同 不复杂但容易忽略。<thead> 多行 <code><tr> 搭配 <code>rowspan/colspan
浏览器只允许 <tr> 的子元素是 <code><th> 或 <code><td>。如果在 <code><tr> 里塞一个 <code><table>，DOM 会被自动修正：那个子表格会被“踢”出 <code><tr>，可能跑到 <code><table> 外面或塞进隐式 <code><tbody>。结果就是 JS 查不到、CSS 选不中、打印错位、导出 Excel 表头塌陷。 <ul>
<li>
<code>document.querySelector('tr > table') 一定返回 null
tr > table 写的样式完全不生效 <th> 的 <code>colspan 总和必须严格等于总列数
比如表格共 10 列，那么 <thead> 里每一行 <code><tr> 中所有 <code><th> 的 <code>colspan 加起来必须是 10。少一个，浏览器会自动补空 <td>；多一个，就会挤偏后续列。 <ul>
<li>第一行用 <code>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> <p><strong>用 <code><colgroup></colgroup> 控制列宽与边框，避免分割线断裂
仅设 border-collapse: collapse 不够。如果某格没定义 border-bottom，合并时就会“吃掉”邻格的线，导致横线断开。 <colgroup></colgroup> 必须紧贴 <table> 开始标签之后，例如： <pre class="brush:html;toolbar:false;"><colgroup>
<col style="width: 60px; border-right: 1px solid #ddd">
<col style="width: 120px; border-right: 1px solid #ddd">
<col style="width: 80px">
</colgroup></pre>
<li>所有 <code><th> 和 <code><td> 都要显式声明 <code>border-bottom 和 border-right（哪怕设为 none） <tr class="header-last"><th style="border-bottom: 2px solid #000">...</th></tr>
想让表头不动、内容能上下左右滚动，不能只靠 position: sticky。 <thead> 必须是 <code><table> 的直接子元素，且 <code><tbody> 要有明确高度（如 <code>max-height: 400px; overflow-y: auto;） <div style="overflow-x: auto;"> 包裹整个 <code><table>，解决横向滚动 <li><code><thead> th 加 <code>position: sticky; top: 0; background: white; z-index: 1; @media print { thead { display: table-header-group; } }
