本文详解为何在动态生成的日历表格中，月份标题（`

`）会异常地紧贴在表头下方显示，核心原因是误将 ` ` 直接插入 ` ` 而未包裹在 `` 中，导致 html 结构非法，浏览器自动纠错引发布局错乱。

在 HTML 表格规范中，

和 元素必须作为 （表格行）的直接子元素存在；任何脱离 的表单元格（包括带 colSpan 的月份标题）都会被浏览器视为结构错误，并触发“容错解析”——通常表现为：浏览器自动闭合或补全缺失的 ，导致视觉上出现“空行”或标题紧贴在 下方、与后续日期行错位。

观察原代码关键问题段：

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 标准（

只允许 为其子元素），浏览器会强制修正：例如在 前插入一个空 ，或将其移至最近合法位置，最终呈现为“一行空白 + 月份标题单独成行”，看似“紧贴 标签后开始”，实则是 DOM 结构崩塌后的渲染副作用。

✅ 正确修复方式：始终确保 或 仅作为 的子节点添加。修改后逻辑如下：

if (month !== prevMonth) {
    // 创建新行用于显示月份标题
    const monthRow = document.createElement("tr");
    const mon
thHeader = 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列完整，若当月最后一天不是周日，应补空 占位，否则下月首日可能挤入错误列；
• 样式兼容性：.calendar th 中的 margin-bottom 对表格单元格无效（表格单元格不支持 margin），应改用 padding-bottom 或通过 border-spacing/border-collapse 控制间距。

? 推荐增强实践：

1. 为月份标题添加专属 CSS 类（如 .month-header），避免与表头 中的 样式冲突；
2. 使用 display: table-caption 或独立 区域展示月份标题，语义更清晰（适用于非严格表格场景）；
3. 利用现代 API 如 Intl.DateTimeFormat 配合 getDay() 和 getDate() 精确计算行列索引，提升健壮性。

总结：HTML 表格结构容错性低，开发者必须严格遵循

→ / → → 的直插操作，都会引发不可预测的渲染行为——这不是浏览器 Bug，而是标准强制保障的必然结果。

/	的嵌套层级。任何跳过