如何解决HTML日历组件左边缘加粗边框异常问题？

本文共计892个文字，预计阅读时间需要4分钟。

该问题源于Flex布局中相邻表格格子的边框叠加效应：

在使用 Flex 布局横向排列多个日历表格（table.calendar）时，开发者常观察到每个日历左侧出现一条异常加粗的竖线——尤其在深色背景或高对比度环境下尤为明显。这并非代码中显式设置的边框，而是 CSS 边框渲染机制与 Flex 排列共同导致的视觉假象。

问题成因：边框叠加（Border Stacking）

关键在于以下两点组合：

• <table> 元素默认具有 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 且边界紧邻时）。