表格单元格absolute定位元素无法占满空间的问题排查与解决

黄色背景没占满单元格的核心原因有两个：

• 浏览器默认样式给<td>元素添加了内边距（padding），.chart容器设置的width:100%和height:100%是基于td的内容区域计算的，而非td的整个盒子（包含边框），导致绝对定位的.chart-inner无法覆盖到td的边框内侧。
• 表格默认使用border-collapse: separate，单元格边框之间会存在默认间距，也会加剧视觉上的空隙感。

1. 清除单元格内边距 #

给包含图表的.td-cell添加padding: 0，让内容区域直接贴合单元格边框：

.td-cell {
  height: 70px;
  border: 1px solid black;
  padding: 0; /* 添加这行 */
}

2. 合并表格边框（可选） #

如果希望单元格边框完全贴合、没有缝隙，给<table>设置border-collapse: collapse：

table {
  border-collapse: collapse; /* 添加这行 */
}

3. 确保容器无额外内边距 #

给.chart添加padding: 0，避免容器自身的内边距限制背景范围：

.chart {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0; /* 添加这行 */
}

调整后完整CSS示例 #

table {
  border-collapse: collapse;
}

thead {
  background-color: black;
  color: white;
}

tbody, tr, td {
  border: 1px solid black;
}

.cell-first-column {
  width: 200px;
  height: 70px;  
}

.cell, th {
  width: 100px;
  height: 70px;
}

.td-cell {
  height: 70px;
  border: 1px solid black;
  padding: 0;
}

.chart {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.chart-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gold;
}

.cell-text {
  z-index: 10;
}

调整后，.chart-inner就能完全填充整个单元格，不会出现白色空隙。

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