如何实现兼具固定表头可滚动与点击展开行的HTML表格？

当然可以同时实现这两个效果！你之前遇到的问题，主要是因为把thead设为table、tbody设为block的方式，破坏了表格原生的布局上下文——不仅会导致表头和内容列宽不对齐，还会干扰展开行的渲染逻辑。下面给你一套可行的实现方案：

核心思路 #

1. 用容器包裹表格，通过容器的overflow-y: auto实现tbody区域的滚动，同时让thead固定在容器顶部
2. 给表格设置table-layout: fixed，保证表头和内容列宽严格对齐
3. 用CSS类控制展开行的显示/隐藏，JavaScript监听可点击行的事件来切换类状态

完整实现代码 #

HTML结构 #

<div class="table-container">
  <table class="fixed-header-expand-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr class="expandable-row">
        <td>1</td>
        <td>项目A</td>
        <td>点击展开</td>
      </tr>
      <tr class="expanded-content">
        <td colspan="3">
          这是项目A的详细内容：包含项目进度、负责人、数据统计等信息
        </td>
      </tr>
      <tr class="expandable-row">
        <td>2</td>
        <td>项目B</td>
        <td>点击展开</td>
      </tr>
      <tr class="expanded-content">
        <td colspan="3">
          这是项目B的详细内容：包含项目进度、负责人、数据统计等信息
        </td>
      </tr>
      <!-- 可添加更多行 -->
    </tbody>
  </table>
</div>

CSS样式 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.table-container {
  max-height: 400px; /* 自定义滚动区域的高度 */
  overflow-y: auto;
  border: 1px solid #000;
}

.fixed-header-expand-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 关键：固定列宽，保证表头与内容列对齐 */
}

.fixed-header-expand-table thead {
  position: sticky;
  top: 0;
  background-color: #fff; /* 用背景色覆盖滚动的内容，避免表头被遮挡 */
}

.fixed-header-expand-table th,
.fixed-header-expand-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

/* 展开内容默认隐藏 */
.expanded-content {
  display: none;
  background-color: #f5f5f5;
}

/* 激活状态下显示展开内容 */
.expanded-content.active {
  display: table-row;
}

.expandable-row {
  cursor: pointer;
}

JavaScript逻辑 #

// 给所有可展开行绑定点击事件
document.querySelectorAll('.expandable-row').forEach(row => {
  row.addEventListener('click', () => {
    // 获取当前行的下一行（即对应的展开内容行）
    const nextRow = row.nextElementSibling;
    if (nextRow && nextRow.classList.contains('expanded-content')) {
      nextRow.classList.toggle('active');
    }
  });
});

关键细节说明 #

• position: sticky实现表头固定：相比你之前用的thead: table + tbody: block方案，sticky能保留表格原生布局，完美解决列宽对齐问题
• table-layout: fixed：强制表格列宽由表头定义，避免内容列宽因内容长度不同而错乱
• 展开行用display: table-row控制：保证展开内容的单元格能正确继承表格布局，不会破坏整体结构

你可以根据需求调整容器高度、样式颜色等参数，这个方案在主流浏览器里都能稳定工作~

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