当使用 javascript 动态显示/隐藏嵌套表格行时，若将 `display` 设为 `"block"` 会导致 `
在构建可展开的表格（如主从结构）时，一个常见需求是：点击某一行（如“July”），下方动态显示一个嵌套子表格，并占满整行宽度（通过 <td colspan="3"> 实现）。但开发者常遇到这样的问题：子表格虽已显示，却未撑满父行宽度，colspan 似乎被忽略。
根本原因在于：HTML 表格元素（如 <tr>、<td>）具有严格的显示上下文约束。当你用 JavaScript 设置 element.style.display = "block" 时，浏览器会将原本语义为“表格行”的 <tr> 强制当作普通块级元素渲染——此时它不再参与表格格式化算法，colspan 属性自然失效，且内部单元格宽度计算完全失控。
✅ 正确解法是：始终使用语义匹配的 display 值。对于 <tr> 元素，应使用 "table-row"；对于 <td> 或 <th>，应使用 "table-cell"；整个嵌套表格本身（<table>）则保持默认 "table" 即可。
以下是修复后的核心 JavaScript 逻辑（关键修改已高亮）：
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
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";
}
}
});
}同时确保 HTML 结构中嵌套行（.tabla-anidada）是标准 <tr>，且其内部 <td> 正确声明 colspan：
<!-- 主表格 -->
<table id="myTable">
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr class="expandir">
<td>John</td>
<td>Doe</td>
<td>23</td>
</tr>
<!-- 可展开的标题行 -->
<tr class="expandir">
<td colspan="3">July</td>
</tr>
<!-- 嵌套内容行 —— 必须是 tr，且 display 切换为 table-row -->
<tr class="expandir tabla-anidada">
<td colspan="3">
<table id="myNestedTable">
<tr><th>Ciudad</th><th>Pais</th></tr>
<tr><td>New York</td><td>USA</td></tr>
<tr><td>Paris</td><td>Francia</td></tr>
</table>
</td>
</tr>
</table>? 注意事项与最佳实践：
- ❌ 避免对 <tr> 使用 display: block / flex / grid —— 这会破坏表格布局模型；
- ✅ 若需更复杂的动画效果（如淡入/滑动），建议包裹一层 <div> 并控制其 visibility + max-height，而非直接操作 <tr> 的 display；
- ? 检查 DOM 结构：确保 .tabla-anidada 确实是 <tr> 的直接兄弟节点（即 nextElementSibling 有效），避免因空文本节点或注释干扰；
- ? 浏览器兼容性：display: table-row 在所有现代浏览器及 IE9+ 中均可靠支持。
总结：colspan 是否生效，不取决于 HTML 写法本身，而取决于其宿主 <td> 所处的渲染上下文是否仍属于表格格式化上下文（table formatting context）。坚持使用语义化 display 值（table-row、table-cell 等），是保障表格行为一致性的基石。
