如何智能解决自制Full Calendar中相邻div边框叠加变粗问题？

嘿，这个边框重复的问题我之前开发自定义日历组件时也踩过坑，太懂这种明明每个元素边框都是1px，凑一起却变成2px粗的糟心感了！结合你说的日历布局随月份变化、不能硬编码的需求，给你分享两个原生方案：

方案一：CSS模拟表格布局（推荐，无JS依赖） #

利用表格的border-collapse特性自动合并相邻边框，用div模拟表格结构就能轻松解决：

1. 给日历容器设置表格样式：

.calendar-container {
  display: table;
  border-collapse: collapse; /* 核心：合并相邻边框 */
  border: 1px solid #ddd; /* 整体外边框 */
}

2. 每个日期单元格设置表格单元格样式：

.calendar-day {
  display: table-cell;
  border: 1px solid #ddd; /* 单元格边框 */
  /* 其他基础样式 */
  width: 14.28%; /* 7列均分宽度 */
  height: 80px;
  text-align: center;
  vertical-align: top;
}

不管月份有多少行，相邻单元格的边框都会自动合并，完全不会出现重复变粗的情况，而且不需要额外处理最后一行/列，非常省心！

方案二：原生JS动态处理边框 #

如果你的布局不适合用表格模拟，就用JS根据单元格位置动态移除多余边框：

// 获取所有日期单元格
const dayCells = document.querySelectorAll('.calendar-day');
const columns = 7; // 固定一周7列

dayCells.forEach((cell, index) => {
  // 最后一列的单元格：移除右边框
  if ((index + 1) % columns === 0) {
    cell.style.borderRight = 'none';
  }
  // 最后一行的单元格：移掉下边框
  if (index >= dayCells.length - columns) {
    cell.style.borderBottom = 'none';
  }
});

这个方法会根据单元格的索引判断位置，不管月份是4行、5行还是6行，都能精准处理最后一行和最后一列的边框，完全不需要硬编码行数。

两种方案都不需要jQuery，而且适配动态变化的日历布局，你可以根据自己的实际结构选最顺手的！

内容的提问来源于stack exchange，提问作者tylkonachwile