如何防止带colspan的表格行破坏其他列的自动宽度计算

  
    

      ssssssss ssssssssssss ... 
    
  

配合以下 CSS：

/* 保证表格宽度可控，防止 body 滚动干扰 */
body {
  overflow-x: auto; /* 避免水平溢出引起的意外跳动 */
}
table {
  width: 100%;
  border-collapse: collapse;
}
/* 详情行隐藏时，仅隐藏内部 div，保留 td 结构 */
.hidden div.detail-content {
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
}
/* 可选：为可见状态添加平滑过渡（需配合 JS 切换类名） */
.detail-content {
  transition: max-height 0.3s ease-out, opacity 0.2s ease-in;
  max-height: 500px; /* 合理上限，防性能问题 */
  overflow: hidden;
}

JavaScript 控制逻辑建议优化为：

document.querySelector('tr[onclick]').addEventListener('click', function() {
  const detailRow = document.getElementById('detail');
  detailRow.classList.toggle('hidden');
});

⚠️ 关键注意事项：

1. 不要使用 display: none 直接隐藏 或 ：这会使浏览器完全忽略该单元格，虽能避免宽度干扰，但在切换显示时会触发整表重排，引发明显闪烁与跳动；
2. height: 0 + overflow: hidden 必须作用于
   而非 ： 是表格单元格，其尺寸受表格算法约束，无法可靠压缩；而

   作为普通块级元素，能完全脱离表格布局上下文；
3. 保留 的存在：确保 HTML 结构语义正确，无障碍访问与打印样式不受影响；
4. 若需支持旧版 IE，可补充 visibility: hidden 和 position: absolute 回退策略，但现代项目中已非必需。

该方案实现了零侵入稳定：各列宽度在首次渲染后即锁定，详情行展开 / 收起仅影响自身高度，不影响其他列宽度表现，且完全兼容窗口缩放与字体大小调整。