如何为内容超出固定高度的日历日期单元格添加滚动条

不要修改<td>的display属性（改成block会破坏表格的行列布局），正确的做法是在每个日期单元格内部添加容器元素，通过容器实现滚动效果：

步骤1：调整HTML结构 #

在每个<td>内新增一个<div>作为内容容器：

<td>
  <div class="calendar-cell-content">
    1号<br>
    会议A<br>
    会议B<br>
    会议C<br>
    会议D<br>
    会议E
  </div>
</td>

步骤2：编写CSS样式 #

保留<td>的表格布局特性，给内部容器设置固定高度和滚动规则：

td {
  border: 1px solid #ccc;
  vertical-align: top;
  padding: 0; /* 移除td内边距，避免和容器内边距叠加 */
  height: 100px; /* 固定单元格高度 */
  width: 14.28%; /* 7列日历的宽度，可按需调整 */
}

.calendar-cell-content {
  height: 100%; /* 继承td的高度 */
  padding: 10px; /* 把原td的内边距移到容器上 */
  overflow-y: auto; /* 仅内容超出时显示垂直滚动条 */
  text-align: center;
}

原理说明 #

• <td>默认的display: table-cell是维持表格行列对齐的核心，修改为block会让单元格脱离表格布局，导致整体错乱。
• 内部容器设置height: 100%后，会严格继承<td>的固定高度，当内容超出容器高度时，overflow-y: auto会自动触发滚动条，同时不会撑开<td>的高度。
• 使用overflow-y: auto而非scroll，刚好满足“仅内容过多时显示滚动条”的需求。

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