嵌套表格(Nested Table)固定表头与最后列失效问题求助

问题描述 #

需要实现带固定表头（thead）和固定最后一列的嵌套表格，目前仅一级表格的最后列固定功能正常，嵌套层级的表头和最后列固定均失效。

原因分析 #

• 嵌套表格缺少独立的thead结构，无法应用sticky表头样式
• 嵌套表格的父容器是<td>，默认overflow: visible，导致position: sticky定位失效（sticky要求父元素的overflow属性不能为visible）
• 原有JS仅绑定了.main-table内的折叠行，嵌套表格中的折叠行未绑定点击事件，无法展开/折叠

解决方案 #

1. 为每个嵌套表格添加与主表格结构一致的thead
2. 给嵌套表格所在的td添加overflow-x: auto样式，满足sticky定位的父容器要求
3. 修改JS选择器，选中所有.view类的行（包括嵌套表格内的），统一绑定折叠事件
4. 调整嵌套表格的样式，确保列宽与主表格对齐，避免错位

修改后的代码 #

HTML #

<div class="table-container">
  <table class="main-table">
    <thead>
      <tr>
        <th>Sr. No.</th>
        <th>Estimate Name</th>
        <th>Total cost</th>
        <th>Code Library</th>
        <th>Type</th>
        <th>Project</th>
        <th>Asset Class</th>
        <th>Asset Type</th>
        <th>BUA m²</th>
        <th>GFA m²</th>
        <th>NIA m²</th>
        <th class="fixed-column">Total Estimate</th>
      </tr>
    </thead>
    <tbody>
      <tr class="fold view">
        <td>0422</td>
        <td>
          Design and Archtitectural Supervsion Services, Ateliers Jean
          Nouvel: Luxury Resort
        </td>
        <td>24-Nov-2020</td>
        <td>NRM1codeLibrary(L1-L4) 2nd Edn</td>
        <td>Contract Bill of Quantities</td>
        <td>Sheraan Desert Resort</td>
        <td>Hospitality</td>
        <td>Hotel & Residences</td>
        <td>1100.00</td>
        <td>1100.00</td>
        <td>1100.00</td>
        <td class="fixed-column nested-content">19,599,749.01</td>
      </tr>
      <tr class="fold fold-child">
        <td colspan="12" class="nested-table-container">
          <table class="nested-table">
            <thead>
              <tr>
                <th>Sr. No.</th>
                <th>Estimate Name</th>
                <th>Total cost</th>
                <th>Code Library</th>
                <th>Type</th>
                <th>Project</th>
                <th>Asset Class</th>
                <th>Asset Type</th>
                <th>BUA m²</th>
                <th>GFA m²</th>
                <th>NIA m²</th>
                <th class="fixed-column">Total Estimate</th>
              </tr>
            </thead>
            <tbody>
              <tr class="fold view">
                <td>0423</td>
                <td>
                  Design and Archtitectural Supervsion Services, Ateliers
                  Jean Nouvel: Luxury Resort
                </td>
                <td>24-Nov-2020</td>
                <td>NRM1codeLibrary(L1-L4) 2nd Edn</td>
                <td>Contract Bill of Quantities</td>
                <td>Sheraan Desert Resort</td>
                <td>Hospitality</td>
                <td>Hotel & Residences</td>
                <td>1100.00</td>
                <td>1100.00</td>
                <td>1100.00</td>
                <td class="fixed-column nested-content">19,599,749.01</td>
              </tr>
              <tr class="fold fold-child">
                <td colspan="12" class="nested-table-container">
                  <table class="nested-table">
                    <thead>
                      <tr>
                        <th>Sr. No.</th>
                        <th>Estimate Name</th>
                        <th>Total cost</th>
                        <th>Code Library</th>
                        <th>Type</th>
                        <th>Project</th>
                        <th>Asset Class</th>
                        <th>Asset Type</th>
                        <th>BUA m²</th>
                        <th>GFA m²</th>
                        <th>NIA m²</th>
                        <th class="fixed-column">Total Estimate</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="fold view">
                        <td>0424</td>
                        <td>
                          Design and Archtitectural Supervsion Services,
                          Ateliers Jean Nouvel: Luxury Resort
                        </td>
                        <td>24-Nov-2020</td>
                        <td>NRM1codeLibrary(L1-L4) 2nd Edn</td>
                        <td>Contract Bill of Quantities</td>
                        <td>Sheraan Desert Resort</td>
                        <td>Hospitality</td>
                        <td>Hotel & Residences</td>
                        <td>1100.00</td>
                        <td>1100.00</td>
                        <td>1100.00</td>
                        <td class="fixed-column">
                          19,599,749.01
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS #

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.table-container {
  overflow-x: auto;
}

.main-table, .nested-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

thead {
  background-color: #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 2;
}

th, td {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  width: 150px;
}

.fixed-column {
  position: sticky;
  right: 0;
  background-color: #f2f2f2;
  z-index: 1;
}

.fold {
  cursor: pointer;
}

.fold-child {
  display: none;
}

.open {
  display: table-row;
}

/* 嵌套表格容器样式，解决sticky父容器问题 */
.nested-table-container {
  padding: 0;
  overflow-x: auto;
}

/* 确保嵌套表格的thead在滚动时固定 */
.nested-table thead {
  top: 0;
}

JavaScript #

document.addEventListener("DOMContentLoaded", function () {
  // 选中所有.view类的行，包括嵌套表格内的
  var viewRows = document.querySelectorAll("tr.view");

  viewRows.forEach(function (row) {
    var firstColumn = row.querySelector("td:first-child");
    if (firstColumn) {
      firstColumn.addEventListener("click", function (event) {
        event.stopPropagation();
        var nestedRow = row.nextElementSibling;
        if (nestedRow && nestedRow.classList.contains("fold-child")) {
          nestedRow.classList.toggle("open");
        }
      });
    }
  });
});

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