该问题源于 flex 布局中相邻表格的边框叠加效应：当多个 border-collapse: collapse 表格并排排列时，右侧表格的左侧边框会与左侧表格的右侧边框重合，视觉上形成一条更粗的“伪边框”。解决方法是为每个日历表格添加微小外边距，主动分离边框。
该问题源于 flex 布局中相邻表格的边框叠加效应：当多个 border-collapse: collapse 表格并排排列时，右侧表格的左侧边框会与左侧表格的右侧边框重合，视觉上形成一条更粗的“伪边框”。解决方法是为每个日历表格添加微小外边距，主动分离边框。
在使用 Flex 布局横向排列多个日历表格（table.Calendar）时，开发者常观察到每个日历左侧出现一条异常加粗的竖线——尤其在深色背景或高对比度环境下尤为明显。这并非代码中显式设置的边框，而是 CSS 边框渲染机制与 Flex 排列共同导致的视觉假象。
问题成因：边框叠加（Border Stacking）
关键在于以下两点组合：
-
元素默认具有 border-collapse: collapse（在您的 CSS 中已显式声明），此时单元格（td/th）及表格自身的边框会合并渲染；
- 当多个表格在 Flex 容器中紧密排列（无间隙）时，右侧表格的 outline 或 border-left 会与左侧表格的 border-right 在像素级完全对齐，浏览器将其渲染为一条更粗的线（例如 1px + 1px = 2px 视觉厚度）。
⚠️ 注意：您当前 CSS 中使用的是 outline: 1px solid #555 而非 border，但 outline 同样会参与该叠加现象（尤其在 flex item 无 margin 且边界紧邻时）。
正确解决方案：引入可控间距
最简洁、兼容性最佳的修复方式是为每个日历表格添加微小的右/下外边距，确保相邻表格之间存在 1px 的物理间隔，从而彻底避免边框重叠：
立即学习“前端免费学习笔记（深入）”；
table.calendar { outline: 1px solid #555; border-collapse: collapse; margin: 0 1px 1px 0; /* 关键修复：右/下各留 1px 间隙 */ }✅ 效果说明：
- margin-right: 1px 防止右侧表格的左侧轮廓与当前表格右侧轮廓对齐；
- margin-bottom: 1px 同时解决多行日历（如响应式换行）时的底部边框粘连；
- margin-left: 0 和 margin-top: 0 保持首列/首行贴左贴顶，不破坏整体对齐；
- 该方案不改变布局逻辑、不增加 dom 节点、不影响可访问性，且在所有现代浏览器中表现一致。
补充建议与注意事项
-
避免使用 border 替代 outline？
不推荐。outline 不占据布局空间，而 border 会触发盒模型计算，可能影响 Flex 项目的尺寸分配。保持 outline + margin 组合是最轻量的解法。 -
若需严格像素对齐（如设计稿要求零间隙）？
可改用 gap 属性（仅适用于 Flex 容器）：#calendars-container { display: flex; flex-wrap: wrap; gap: 1px; /* 替代单个 table 的 margin */ }⚠️ 注意：gap 在旧版 safari 中需加 -webkit- 前缀，且对 IE 完全不支持；而 margin 方案兼容性更广（IE11+）。
-
验证是否根治？
打开浏览器开发者工具 → 选中任意日历表格 → 查看 Computed 面板中的 margin 和 outline 渲染区域，确认相邻表格的 outline 区域不再重叠。
通过这一微调，您即可在保留原有 Flex 布局优势的同时，彻底消除日历左侧的“幽灵粗线”，让界面呈现专业、精准的视觉效果。