如何修复日历表格中月份标题行错位显示的问题

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列完整，若当月最后一天不是周日，应补空 占位，否则下月首日可能挤入错误列；

• 样式兼容性：.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，而是标准强制保障的必然结果。

/	的嵌套层级。任何跳过