当使用 javascript 动态显示/隐藏嵌套表格行时，若将 `display` 设为 `"block"` 会导致 `
在构建可展开/折叠的表格（如主-明细结构）时，一个常见需求是：点击某一行（如“July”），下方动态显示一个完整宽度的嵌套表格详情行。开发者常通过为
根本原因：
- colspan="3" 被忽略（单元格不再横跨三列）；
- 内部嵌套表格失去父
的宽度约束，可能收缩或错位； - 表格边框、对齐、border-collapse 等样式失效。
正确解决方案：
将 JavaScript 中的显示逻辑从 display: block 改为 display: table-row，确保该行始终以表格行身份参与渲染：var expandirButton = document.getElementsByClassName("expandir"); for (var i = 0; i < expandirButton.length; i++) { expandirButton[i].addEventListener("click", function() { this.classList.toggle("active"); var tablaAnidada = this.nextElementSibling; if (tablaAnidada && tablaAnidada.classList.contains("tabla-anidada")) { // ✅ 关键修正：使用 'table-row' 而非 'block' if (tablaAnidada.style.display === "table-row") { tablaAnidada.style.display = "none"; } else { tablaAnidada.style.display = "table-row"; } } }); }同时，CSS 中可保留初始隐藏规则（无需修改）：
.tabla-anidada { display: none; /* 初始隐藏，不影响后续 table-row 切换 */ }HTML 结构注意事项：
- 嵌套表格必须包裹在
内（N 为父表列数），且该 必须位于 中； - 确保 .tabla-anidada 行紧邻触发行（即 this.nextElementSibling 确实指向目标
），避免 DOM 结构错位； - 不要为
添加 width 或 flex 等非表格属性，以免干扰布局。 进阶建议：
- 使用 visibility: hidden + height: 0 + overflow: hidden 配合 CSS 过渡实现平滑展开动画（需额外处理表格行高）；
- 对于复杂场景，推荐改用
ails>/ 语义化标签，或采用现代框架（如 React/Vue）管理状态与条件渲染，避免直接操作原生表格 DOM。
遵循 display: table-row 原则，即可让 colspan 正常生效，嵌套表格完美撑满整行宽度，兼顾语义、样式与交互一致性。
- 确保 .tabla-anidada 行紧邻触发行（即 this.nextElementSibling 确实指向目标
