使用display:table-cell制作日历时边框未撑满行高问题咨询

嘿，这个问题我之前做日历组件时也踩过坑！其实你并没有操作错误——这是display:table-cell布局里一个非常常见的细节问题～

问题根源 #

display:table-cell本身的特性是同行所有单元格会自动匹配最高单元格的高度，但如果你的边框是加在table-cell内部的子元素上（比如每个日期的内容容器），而不是直接加在table-cell元素上，就会出现边框不延伸的情况：因为table-cell的高度被内容撑开了，但内部的子元素并没有自动撑满这个高度，边框自然就只跟着子元素的内容高度走了。

两种解决方案 #

方案1：直接给table-cell加边框

这是最简单的处理方式，把边框样式从内部容器移到table-cell本身：

/* 日历单元格样式 */
.calendar-cell {
  display: table-cell;
  width: 14.28%; /* 日历7列，每列均分宽度 */
  border: 1px solid #e0e0e0;
  padding: 10px;
  vertical-align: top; /* 内容顶部对齐 */
}

/* 内部内容容器去掉边框，保留其他样式 */
.day-content {
  /* 删掉原来的边框样式 */
  padding: 5px; /* 可根据需求保留内边距 */
}

这样table-cell高度统一后，边框自然就跟着铺满整个单元格高度了。

方案2：让内部容器撑满table-cell高度

如果因为业务需求必须把边框加在内部容器上，可以通过强制内部容器占满table-cell的高度来解决：

.calendar-cell {
  display: table-cell;
  width: 14.28%;
  vertical-align: top;
  height: 1px; /* 关键技巧：给table-cell一个最小高度，触发内部100%高度生效 */
}

.day-content {
  height: 100%;
  border: 1px solid #e0e0e0;
  box-sizing: border-box; /* 必须加！不然边框会超出单元格范围 */
  padding: 10px;
}

另外，也可以考虑用flex布局替代table-cell，flex布局的子元素默认会自动匹配同行最高元素的高度，边框对齐会更省心：

/* 日历行用flex布局 */
.calendar-row {
  display: flex;
}

/* 每个日期单元格 */
.day-cell {
  flex: 1; /* 均分宽度 */
  border: 1px solid #e0e0e0;
  padding: 10px;
}

总结 #

核心问题就是内部容器没有撑满table-cell的高度，要么把边框直接绑定到table-cell元素上，要么强制内部容器占满整个单元格高度，两种方式都能解决边框不延伸的问题～

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