table-layout: fixed 是跨行标头对齐的前提，需配合完整首行、固定列宽定义及 tbody 行数匹配；border-collapse: collapse 保障边框渲染稳定；复杂层级建议手绘结构草图。
table-layout: fixed 是跨行标头能对齐的前提
浏览器默认的 table-layout: auto 会让表格根据内容撑开列宽，一旦某列有跨多行的 <th rowspan="2">，它下面的 <td> 列宽就容易被上层标头“带歪”——尤其是内容长度不均时。必须显式设为 table-layout: fixed，才能让列宽由第一行（或 <col>）决定，后续所有行都严格按此对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<table>直接加style="table-layout: fixed; width: 100%;"，别依赖继承 - 第一行
<tr>必须包含完整列数（哪怕只是空<th>），否则列数推导会出错 - 如果用
<col>定义宽度，width值必须是固定单位（如px或百分比），不能用auto
rowspan 跨行标头要和 tbody 行数严格匹配
常见错误是 <th rowspan="3"> 想覆盖三行数据，但实际 <tbody> 只有两行，或者中间某行漏了 <td> 导致列数错位。浏览器不会报错，但视觉上标头悬浮、列对不齐，调试时很难定位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先写好
<tbody>的完整结构（包括所有<tr>和对应数量的<td>），再往上补<thead>的rowspan - 用浏览器开发者工具检查
<th>的offsetWidth和同列<td>是否一致，不一致大概率是行数或列数没对齐 - 避免在
<thead>里混用rowspan和colspan，复杂嵌套极易失控
border-collapse: collapse 影响跨行标头的边框渲染
当标头跨行且设置了边框时，border-collapse: separate（默认）会让每行的边框独立绘制，导致跨行 <th> 的底部边框和下一行 <td> 的顶部边框重叠或错位，看起来像边框加粗或断开。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一加
border-collapse: collapse到<table>，这是跨行标头视觉稳定的必要条件 - 如果需要内边距，改用
padding，别依赖border-spacing（它在collapse模式下无效） - 边框颜色/样式不一致时，优先检查是否某列的
<td>没设边框，而不是怀疑rowspan本身
Flex/Grid 替代方案在真实数据面板中反而更难控制
有人想用 display: grid 模拟跨行表头，但 Grid 的 grid-row: span 2 对动态行数支持差：新增一行数据就得手动调网格线，响应式重排也容易崩；Flex 更没法自然对齐多列数据。CSS 表格语义和渲染机制就是为这类场景设计的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只要数据是二维结构、需行列对齐、有分组标头，就老实用
<table>+rowspan+table-layout: fixed - 如果后端返回的是扁平数组，前端拼 HTML 时先按逻辑分组生成
<thead>，再生成<tbody>，别试图用 JS 动态计算rowspan - 真正麻烦的不是写法，而是标头层级超过两层（比如
rowspan="2"和rowspan="3"并存），这时必须手动画表格结构草图，不然连自己都看不明白
跨行标头最常出问题的地方，不是 CSS 属性写错了，而是 HTML 结构里某处少了一个 <td>，或者 rowspan 数字和实际数据行数差了 1 —— 浏览器不会提醒，但整列都会偏移。调试时先数行，再量宽，最后看边框，顺序不能乱。
