如何消除表格行间残留的微小空白？已使用border-collapse: collapse

以下是几个针对性的修复方案，可彻底消除表格内的残留空隙：

1. 重置表格单元格的默认内边距与外边距 #

浏览器会给<td>元素设置默认内边距，这是残留空隙的常见来源。添加以下CSS：

td {
  padding: 0;
  margin: 0;
}

2. 统一单元格垂直对齐方式 #

确保两个单元格的垂直对齐一致，避免因对齐差异产生视觉空隙：

td {
  vertical-align: top;
}

3. 显式设置边框间距（可选） #

虽然border-collapse: collapse会覆盖border-spacing，但显式设置为0可避免潜在的浏览器兼容性问题：

table {
  border-radius: 20px;
  overflow: hidden;
  border-collapse: collapse;
  border-spacing: 0; /* 新增 */
}

完整修复后的CSS代码 #

table {
  border-radius: 20px;
  overflow: hidden;
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 0;
  margin: 0;
  vertical-align: top;
}

img {
  display: block;
  width: 300px;
  min-width: 300px;
  max-width: 1440px;
}

.text-container {
  width: 300px;
  min-width: 300px;
  max-width: 1440px;
}

这些修改会彻底清除表格内的所有默认间距，让单元格完全贴合。

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