该问题源于 flex 布局中相邻表格的边框叠加效应：当多个 border-collapse: collapse 表格并排排列时，右侧表格的左侧边框会与左侧表格的右侧边框重合，视觉上形成一条更粗的“伪边框”。解决方法是为每个日历表格添加微小外边距，主动分离边框。

该问题源于 flex 布局中相邻表格的边框叠加效应：当多个 border-collapse: collapse 表格并排排列时，右侧表格的左侧边框会与左侧表格的右侧边框重合，视觉上形成一条更粗的“伪边框”。解决方法是为每个日历表格添加微小外边距，主动分离边框。

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

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

问题成因：边框叠加（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 布局优势的同时，彻底消除日历左侧的“幽灵粗线”，让界面呈现专业、精准的视觉效果。