本文详解为何在动态生成的日历表格中，月份标题（`
在 HTML 表格规范中，<th> 和 <td> 元素必须作为 <tr>（表格行）的直接子元素存在；任何脱离 <tr> 的表单元格（包括带 colSpan 的月份标题）都会被浏览器视为结构错误，并触发“容错解析”——通常表现为：浏览器自动闭合或补全缺失的 <tr>，导致视觉上出现“空行”或标题紧贴在 <thead> 下方、与后续日期行错位。
观察原代码关键问题段：
if (month !== prevMonth) {
var tr = document.createElement("tr");
var th = document.createElement("th");
th.colSpan = 7;
th.textContent = "...";
tr.appendChild(th); // ✅ 正确：th 加入 tr
tbody.appendChild(tr); // ✅ 正确：tr 加入 tbody
}但原问题代码中实际执行的是：
tbody.appendChild(th); // ❌ 错误！th 直接插入 tbody，无 tr 包裹
这违反了 HTML 标准（<tbody> 只允许 <tr> 为其子元素），浏览器会强制修正：例如在 <th> 前插入一个空 <tr>，或将其移至最近合法位置，最终呈现为“一行空白 + 月份标题单独成行”，看似“紧贴 <th> 标签后开始”，实则是 DOM 结构崩塌后的渲染副作用。
✅ 正确修复方式：始终确保 <th> 或 <td> 仅作为 <tr> 的子节点添加。修改后逻辑如下：
if (month !== prevMonth) {
// 创建新行用于显示月份标题
const monthRow = document.createElement("tr");
const monthHeader = document.createElement("th");
monthHeader.colSpan = 7;
monthHeader.textContent = new Intl.DateTimeFormat("fr-FR", {
month: "long",
year: "numeric"
}).format(currentDate);
monthHeader.className = "month-header"; // 可选：添加样式类便于控制
monthRow.appendChild(monthHeader);
tbody.appendChild(monthRow); // ✅ 完整结构：tr → th → tbody
prevMonth = month;
}⚠️ 同时需注意其他潜在问题：
- 周起始逻辑缺陷：原代码用 currentDate.getDay() == 1（周一）创建新行，但未处理首日非周一的情况（如某月1号是周三），会导致日期列错位；
- 月末补全缺失：日历需保证每周7列完整，若当月最后一天不是周日，应补空 <td> 占位，否则下月首日可能挤入错误列；
- 样式兼容性：.calendar th 中的 margin-bottom 对表格单元格无效（表格单元格不支持 margin），应改用 padding-bottom 或通过 border-spacing/border-collapse 控制间距。
? 推荐增强实践：
- 为月份标题添加专属 CSS 类（如 .month-header），避免与表头 <thead> 中的 <th> 样式冲突；
- 使用 display: table-caption 或独立 <div> 区域展示月份标题，语义更清晰（适用于非严格表格场景）；
- 利用现代 API 如 Intl.DateTimeFormat 配合 getDay() 和 getDate() 精确计算行列索引，提升健壮性。
总结：HTML 表格结构容错性低，开发者必须严格遵循 <table> → <thead>/<tbody> → <tr> → <th>/<td> 的嵌套层级。任何跳过 <tr> 的直插操作，都会引发不可预测的渲染行为——这不是浏览器 Bug，而是标准强制保障的必然结果。
