如何让动态填充表格的行间距保持一致并消除多余间距？

问题原因 #

第二个表格的图片单元格设置了固定的rowspan="10"，但实际数据行数远少于10，表格会自动为未填充的行预留空间，导致行间距被拉长，和第一个表格不一致。

解决方案 #

因为表格是动态填充的，必须根据实际数据行数动态设置rowspan值，同时配合CSS确保行高自适应。

步骤1：调整HTML结构

移除图片单元格的固定rowspan属性，给表格和图片单元格添加标识类，方便后续定位：

<h2>所有内容已填充</h2>
<table class="data-table">
  <tr>
    <td colspan="3">Name1</td>
  </tr>
  <tr>
    <td>使用材料:</td>
    <td>产品1, 产品2, 产品3</td>
    <td class="img-cell"><img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="图片标记名称" /></td>
  </tr>
  <tr>
    <td>隔间:</td>
    <td>建筑</td>
  </tr>
  <tr>
    <td>防火等级:</td>
    <td>EI120</td>
  </tr>
  <tr>
    <td>隔间类型:</td>
    <td>墙体</td>
  </tr>
  <tr>
    <td>材料:</td>
    <td>材料1, 材料2, 材料3</td>
  </tr>
  <tr>
    <td>穿透尺寸(宽×高):</td>
    <td>40×50</td>
  </tr>
  <tr>
    <td>管道类型/尺寸:</td>
    <td>类型/50mm</td>
  </tr>
  <tr>
    <td>墙体厚度:</td>
    <td>55mm</td>
  </tr>
  <tr>
    <td>安装日期:</td>
    <td>2023/09/21</td>
  </tr>
  <tr>
    <td>备注:</td>
    <td>备注1, 备注2, 备注3</td>
  </tr>
</table>

<h2>部分内容已填充</h2>
<table class="data-table">
  <tr>
    <td colspan="3">Name1</td>
  </tr>
  <tr>
    <td>使用材料:</td>
    <td>产品1, 产品2, 产品3</td>
    <td class="img-cell"><img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="图片标记名称" /></td>
  </tr>
  <tr>
    <td>隔间:</td>
    <td>建筑</td>
  </tr>
  <tr>
    <td>安装日期:</td>
    <td>2023/09/21</td>
  </tr>
</table>

步骤2：优化CSS样式

.marker-img-column {
  background-color: #ffffff;
  text-align: center;
  margin: 0;
  padding: 0 0 0 1em;
  width: 20em;
}

.marker-img {
  max-height: 300px;
  max-width: 400px;
  width: 275px;
  height: auto;
  margin: 0;
  padding: 0;
}

/* 统一表格行高与内边距，消除多余间距 */
.data-table {
  border-collapse: collapse;
}
.data-table td {
  padding: 0.5em;
}
.data-table tr {
  height: auto;
}

步骤3：动态设置rowspan

在表格填充完成后，执行以下脚本，自动计算每个表格的实际数据行数并设置图片单元格的rowspan：

// 遍历所有数据表格
document.querySelectorAll('.data-table').forEach(table => {
  // 计算除标题行外的数据行数量
  const rowCount = table.querySelectorAll('tr').length - 1;
  // 定位图片单元格并设置rowspan
  const imgCell = table.querySelector('.img-cell');
  if (imgCell) {
    imgCell.setAttribute('rowspan', rowCount);
  }
});

效果说明 #

修改后，无论表格动态填充多少行，图片单元格的rowspan都会自动匹配实际数据行数，两个表格的行间距将完全一致，不会出现多余空白。

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