纯HTML能做结构正确的复杂考勤表，关键在于手动校验行列总数：colspan="2"占2列则后续补6个单元格，rowspan="2"要求下一行同列留空，用Array.from(tr.children).reduce(...)确保每行真实列数一致。
纯 HTML 能做出结构正确的复杂考勤表，但必须手动对齐行列总数、严格管理 rowspan 和 colspan 的占位逻辑——漏删一个 <td>，整张表就错行、边框断裂、打印时内容错位。
<h3>怎么写对多级表头（比如“日期”跨两列、“出勤天数”合并“加班+日勤”）</h3>
<p>关键不是“加属性”，而是先算清总列数，再决定哪几个单元格要吞掉同行或同列的空位。</p>
<ul>
<li>假设最终表格共 8 列，第一行有 <code><th colspan="2">日期</th>，那它实际占 2 列，后面必须只补 6 个单元格（不能补 7 个）
<th rowspan="2">序号</th> 意味着第二行同一列位置必须留空，不能写 <td></td>，否则浏览器会把它当新列渲染Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0) 在控制台跑一遍，确认每行真实列数都是 8，这是最可靠的校验方式为什么表格一加合并就边框断开或文字偏移
根本原因是 border-collapse: collapse 没生效，或者样式被其他规则覆盖。更隐蔽的问题是：合并单元格后，相邻 <td> 的 padding 或 vertical-align 不一致，视觉上像“裂开”。
- 必须显式写
table { border-collapse: collapse; }，仅设border不够 - 所有
<th>和<td>要统一padding和vertical-align: middle，否则跨行单元格里的文字会和下一行不对齐 - 避免混用
border属性和outline，后者不参与盒模型计算，会导致合并后边界“虚连”
如何避免手写 HTML 表格时结构错乱
别从第一行开始硬写，先画网格草图，标出每个单元格的 rowspan 和 colspan 值，再按行填充——尤其注意 <thead> 和 <tbody> 是独立容器，但列坐标必须物理对齐。
立即学习“前端免费学习笔记（深入）”；
-
<thead>第一行用了<th rowspan="2">，那<tbody>第一行对应列也必须跳过，不能补<td> - Excel 导出 HTML 是捷径：把设计好的考勤表在 Excel 里调好合并，另存为“网页 (*.htm; *.html)”，再清理冗余 style（如
mso-前缀），比手写快且不易错 - 调试时右键检查元素，看合并单元格的 box model 是否真正跨行/跨列；再点开下一行 DOM，确认目标列位置是否真的没有节点
最难的不是写对标签，而是让“员工编码\姓名\日期”这种带反斜杠的文本，在合并单元格里既显示清晰又不破坏语义——<div> 套 <span> 加 CSS display: inline-block 是唯一稳妥解法，原生 <th> 无法自动换行对齐。
