当使用 javascript 动态显示/隐藏嵌套表格行时，若将 `display` 设为 `"block"` 会导致 `

` 元素脱离表格渲染上下文，使 `colspan` 失效；正确做法是将其设为 `"table-row"`，以保持原生表格语义与布局行为。

在构建可展开/折叠的表格（如主-明细结构）时，一个常见需求是：点击某一行（如“July”），下方动态显示一个完整宽度的嵌套表格详情行。开发者常通过为

设置 display: none 初始隐藏，并用 JS 切换 display: block 实现显示——但此举恰恰破坏了 HTML 表格的渲染规则。

根本原因：

是表格专有元素，其默认 display 值为 table-row。当 JS 强制设为 display: block 时，浏览器会将其当作普通块级元素处理，不再参与表格布局计算，导致：

• 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 中可保留初始隐藏规则（无需修改）：


SSL Certificate Checker
SSL/TLS 证书到期检查器和域名健康监控。检查证书到期、颁发者信息、SAN 条目及证书链有效性，适用于单个或多个域名。
下载

.tabla-anidada {
  display: none; /* 初始隐藏，不影响后续 table-row 切换 */
}

HTML 结构注意事项：

• 嵌套表格必须包裹在 内（N 为父表列数），且该 必须位于 中；
• 确保 .tabla-anidada 行紧邻触发行（即 this.nextElementSibling 确实指向目标 ），避免 DOM 结构错位；
• 不要为 添加 width 或 flex 等非表格属性，以免干扰布局。

  进阶建议：

  • 使用 visibility: hidden + height: 0 + overflow: hidden 配合 CSS 过渡实现平滑展开动画（需额外处理表格行高）；
  • 对于复杂场景，推荐改用
    /

    语义化标签，或采用现代框架（如 React/Vue）管理状态与条件渲染，避免直接操作原生表格 DOM。

  遵循 display: table-row 原则，即可让 colspan 正常生效，嵌套表格完美撑满整行宽度，兼顾语义、样式与交互一致性。