如何使表格单元格内的div垂直拉伸以填满整个单元格？

核心原因 #

表格单元格高度由内容动态撑开时，height: 100% 无法正确继承高度——因为父元素（单元格）没有明确的高度值，导致第二列div无法垂直拉伸。

解决方案1：修复表格与单元格基础样式 #

统一表格、单元格、div的样式，消除默认间距与高度继承障碍：

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse; /* 合并表格边框，避免间隙 */
  table-layout: fixed; /* 固定布局，确保列宽一致 */
}

/* 单元格样式 */
td {
  padding: 0; /* 移除单元格默认内边距 */
  margin: 0;
  height: 100%; /* 强制单元格继承行高度 */
}

/* 单元格内div样式 */
td div {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  margin: 0;
  box-sizing: border-box; /* 边框计入宽高，避免溢出 */
}

解决方案2：用Flex布局强制div填充单元格 #

给单元格设置flex布局，让内部div自动撑满空间：

td {
  display: flex;
  padding: 0;
}

td div {
  flex: 1; /* 自动填充单元格剩余空间 */
  border: 1px solid #000;
  box-sizing: border-box;
}

解决方案3：替换表格为Grid布局（推荐） #

若无需表格语义化，用CSS Grid实现更灵活的2×2布局，直接让区块自动贴合：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; /* 移除网格间隙 */
  width: 100%;
}

.grid-item {
  border: 1px solid #000;
  box-sizing: border-box;
}

对应HTML结构：

<div class="grid-container">
  <div class="grid-item">内容1</div>
  <div class="grid-item">内容2</div>
  <div class="grid-item">内容3</div>
  <div class="grid-item">内容4</div>
</div>

关键注意点 #

• 必须设置box-sizing: border-box，避免边框导致元素溢出单元格
• 移除表格单元格默认padding，否则div无法完全贴合单元格边缘
• 若表格行高度由某一列内容撑开，确保所有单元格都继承该行高度

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