如何优化含row span合并单元格的表格行高？含整行合并与隐藏列场景

问题1：检测整行单元格均向下合并并调整行高 #

直接通过JavaScript遍历表格行，检查每行所有单元格的rowspan属性：

• 遍历每一行<tr>，获取该行所有的<td>/<th>单元格
• 逐个检查单元格的rowspan值，只要有一个单元格的rowspan≤1，就说明该行存在未向下合并的单元格
• 若所有单元格rowspan都>1，证明该行完全被合并到下方行，直接设置行高为极小值（比如1px），配合overflow:hidden确保生效

示例代码：

// 遍历所有表格行
document.querySelectorAll('tr').forEach(row => {
  const cells = row.querySelectorAll('td, th');
  let isFullSpan = true;
  
  // 检查每个单元格的rowspan
  cells.forEach(cell => {
    const rowspanNum = parseInt(cell.getAttribute('rowspan')) || 1;
    if (rowspanNum <= 1) {
      isFullSpan = false;
    }
  });
  
  // 符合条件则调整行高
  if (isFullSpan) {
    row.style.height = '1px';
    row.style.overflow = 'hidden';
    // 也可以用CSS类，更便于维护
    // row.classList.add('collapsed-row');
  }
});

对应的CSS类（可选）：

.collapsed-row {
  height: 1px !important;
  overflow: hidden;
  line-height: 1px;
}

问题2：存在含未合并单元格的隐藏列时的行高调整 #

核心逻辑不变，不要忽略隐藏列中的单元格：

• 隐藏列（无论是通过<col>设置隐藏，还是单元格自身display:none）的单元格仍存在于DOM中，必须纳入检查范围
• 即使单元格所在列被隐藏，只要它的rowspan≤1，就说明该行并非完全向下合并，不能调整行高
• 只有当该行所有单元格（包括隐藏列的）rowspan都>1时，才执行行高调整

修改后的逻辑和问题1的代码一致，因为querySelectorAll会选中所有DOM中的单元格，不管是否隐藏。如果需要特别处理某些隐藏规则，可在检查时额外判断单元格的可见性，但一般情况下不需要——因为隐藏列的未合并单元格，本质上还是属于该行的有效单元格，不能因为列隐藏就忽略它的存在。

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