嵌套表格展开后colspan失效，子表格无法占满整行求助

问题根源：你通过JavaScript将包含子表格的<tr>元素的display设置为block，但<tr>默认的布局属性是table-row，改成block会破坏表格的固有布局规则，导致内部的<td>无法正确继承父表格的宽度，进而子表格无法占满。

快速修复方案 #

直接修改JavaScript中控制显示的代码，将block替换为<tr>应有的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.classList.contains("tabla-anidada")) {
      if (tablaAnidada.style.display === "table-row") {
        tablaAnidada.style.display = "none";
      } else {
        tablaAnidada.style.display = "table-row";
      }
    }
  });
}

修改后，<tr>会保持表格行的布局特性，内部带colspan="3"的<td>会自动占满父表格宽度，子表格也会继承这个宽度。

更规范的优化方案（推荐） #

用CSS类来控制显示隐藏，避免直接操作元素的style属性，更符合样式与逻辑分离的原则：

1. 修改CSS：

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
}

th,
td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #4CAF50;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

/* 初始显示子表格行，用hidden类控制隐藏 */
.tabla-anidada {
  display: table-row;
}
.tabla-anidada.hidden {
  display: none;
}

2. 修改JavaScript：

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.classList.contains("tabla-anidada")) {
      tablaAnidada.classList.toggle("hidden");
    }
  });
}

3. HTML调整子表格行的初始状态：

<tr class="expandir tabla-anidada hidden">
  <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>

这种方式更易维护，后续调整显示逻辑只需要修改CSS类即可。

内容的提问来源于stack exchange，提问作者Solucion Ya