如何实现thead和tfoot固定、tbody可滚动且仅tbody带滚动条的表格

我需要创建一个表头（thead）和表脚（tfoot）固定、中间表体（tbody）可滚动的表格，要求滚动条仅出现在tbody区域。尝试了以下方案但均存在问题：

• 给表格添加外层容器并设置高度与overflow：滚动条会延伸覆盖表头和表脚，不符合需求
• 使用Grid布局+subgrid：表头表脚列对齐正常，但tbody内容溢出时会将表脚挤到下方
• 设置tbody为display:block：表体内容会被挤压到第一列，布局完全错乱

我优先希望使用语义化的<table>标签实现，只有在实在无法解决时才考虑用div拆分表头、表体、表脚的方案。

尝试过的方案1：外层容器+sticky表头表脚 #

div {
  max-height: 160px;
  overflow: auto;
}

table {
  width: 100%;
}

th, td {
  border: 1px solid black;
}

thead {
  background-color: white;
  position: sticky;
  top: 0;
}

tfoot {
  background-color: white;
  position: sticky;
  bottom: 0;
}

<div>
  <table>
    <thead>
      <tr><th>HEAD</th><th>HEAD</th><th>HEAD</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
    </tbody>
    <tfoot>
      <tr><td>FOOT</td><td>FOOT</td><td>FOOT</td></tr>
    </tfoot>
  </table>
</div>

问题：滚动条覆盖整个容器，包含表头和表脚区域。

尝试过的方案2：Grid+Subgrid布局 #

table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
 
th, td {
  border: 1px solid black; 
}
 
thead, tbody, tfoot, tr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / 4;
}
 
tbody {
  max-height: 128px;
  overflow: auto;
}
 
tfoot {
  position: sticky;
  bottom: 0;
}

<table>
  <thead>
    <tr><th>HEAD</th><th>HEAD</th><th>HEAD</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
  </tbody>
  <tfoot>
    <tr><td>FOOT</td><td>FOOT</td><td>FOOT</td></tr>
  </tfoot>
</table>

问题：tbody内容溢出时会将表脚挤到可视区域外，无法固定在底部。

尝试过的方案3：tbody设为display:block #

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}

tbody {
  display: block;
  max-height: 128px;
  overflow: auto;
  width: 100%;
}

<table>
  <thead>
    <tr><th>HEAD</th><th>HEAD</th><th>HEAD</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
  </tbody>
  <tfoot>
    <tr><td>FOOT</td><td>FOOT</td><td>FOOT</td></tr>
  </tfoot>
</table>

问题：tbody内的单元格全部挤到第一列，列对齐完全失效。

可行的语义化表格实现方案 #

通过固定列宽+sticky定位+块级tbody的组合，可以实现需求，同时保留完整的table语义：

.table-container {
  max-height: 200px; /* 容器总高度，根据实际需求调整 */
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 固定列宽，确保表头、表体、表脚列对齐 */
}

th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}

thead {
  position: sticky;
  top: 0;
  background-color: #fff; /* 白色背景避免被滚动内容遮挡 */
}

tfoot {
  position: sticky;
  bottom: 0;
  background-color: #fff;
}

tbody {
  display: block;
  max-height: calc(100% - 80px); /* 减去表头和表脚的总高度，按需调整 */
  overflow-y: auto; /* 仅表体显示垂直滚动条 */
}

/* 保证每行的列宽与表格一致 */
thead tr, tfoot tr, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

<div class="table-container">
  <table>
    <thead>
      <tr><th>表头1</th><th>表头2</th><th>表头3</th></tr>
    </thead>
    <tbody>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
    </tbody>
    <tfoot>
      <tr><td>表脚1</td><td>表脚2</td><td>表脚3</td></tr>
    </tfoot>
  </table>
</div>

关键说明：

1. table-layout: fixed：强制表格列宽均匀分配（或按设置的宽度），彻底解决表头表体列对齐问题
2. tbody { display: block; overflow-y: auto; }：让表体单独成为可滚动的块级容器，滚动条仅出现在tbody区域
3. position: sticky：将表头固定在容器顶部、表脚固定在容器底部，白色背景避免被滚动内容穿透
4. 给所有行设置display: table; table-layout: fixed：确保每行的列布局与表格保持一致，避免tbody内的行错位

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