如何使用JavaScript与CSS实现学生数据展示所需的嵌套表格？

算力阿峰

2026-9-30

仅使用原生JavaScript和CSS完全可以实现你需要的嵌套表格功能，不用依赖第三方商业组件，具体实现方案如下：

原生实现思路

结构：直接用HTML原生嵌套即可，父表格的

单元格内可直接放置子，需要跨行合并的位置用rowspan

样式：用CSS控制边框合并、单元格对齐，子表格可设置缩进、差异化背景色区分层级，样式可完全自定义，不会受第三方组件的默认样式限制。

交互：仅需少量JS代码即可完成交互，点击展开按钮时切换子表格显示状态即可，如果需要动态加载子表数据，在点击事件里加对应数据渲染逻辑即可，数据量较大的情况下也可以搭配虚拟滚动逻辑优化性能。

核心代码示例

<!-- 父表格基础结构 -->
<table class="parent-table">
  <thead>
    <tr>
      <th>操作</th>
      <th>学生姓名</th>
      <th>年级</th>
      <th>所属班级</th>
    </tr>
  </thead>
  <tbody>
    <!-- 父级数据行 -->
    <tr class="parent-row">
      <td><button class="expand-btn">展开</button></td>
      <td>张三</td>
      <td>高一</td>
      <td>1班</td>
    </tr>
    <!-- 子表格所在行 -->
    <tr class="child-row">
      <!-- colspan占满父表格全部列 -->
      <td colspan="4">
        <table class="child-table">
          <thead>
            <tr><th>学科</th><th>分数</th><th>年级排名</th></tr>
          </thead>
          <tbody>
            <tr><td>语文</td><td>92</td><td>15</td></tr>
            <tr><td>数学</td><td>88</td><td>23</td></tr>
            <!-- 还可以继续嵌套下一级表格，对应新生入学历史数据 -->
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

/* 核心控制样式 */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
}
/* 子行默认隐藏 */
.child-row {
  display: none;
}
/* 展开状态显示 */
.child-row.expanded {
  display: table-row;
}
/* 子表格样式差异化 */
.child-table {
  width: calc(100% - 24px);
  margin: 8px 0 8px 24px;
  background: #f9fafb;
}

// 展开收起交互逻辑
document.querySelectorAll('.expand-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const parentRow = btn.closest('.parent-row');
    const childRow = parentRow.nextElementSibling;
    childRow.classList.toggle('expanded');
    btn.textContent = childRow.classList.contains('expanded') ? '收起' : '展开';
    // 如需动态加载子表数据，可在此处发起请求后渲染子表格内容
  })
})

如果需要实现多层嵌套，只要在子表格的单元格中继续套用上述结构即可，逻辑完全一致。如果需要新增排序、筛选、分页等附加功能，直接在现有逻辑上扩展即可，灵活度远高于第三方封装组件。

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

属性就能实现你要的布局效果。展开收起功能可给子表格所在行加自定义状态类，默认隐藏，点击父行操作按钮时切换状态即可。

如何使用JavaScript与CSS实现学生数据展示所需的嵌套表格？

原生实现思路 #

核心代码示例 #

原生实现思路

核心代码示例