实现占满空间且表头固定的静态div与table组件（纯CSS方案）

以下是满足需求的纯CSS解决方案，无需JS计算即可实现顶部面板和表头固定、仅表格主体滚动的效果：

修正后的完整代码 #

CSS 代码

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.top-panel {
  padding: 10px;
  background-color: #f0f0f0;
  flex-shrink: 0; /* 防止顶部面板被压缩 */
}
.table-container {
  flex: 1;
  overflow: hidden;
  padding: 0 10px;
}
.table-container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 固定列宽，保证表头与单元格对齐 */
}
.table-container thead {
  display: table;
  width: 100%;
  background-color: #fff; /* 避免滚动时tbody内容穿透表头 */
}
.table-container tbody {
  display: block;
  height: calc(100% - 42px); /* 减去thead的高度，可根据实际样式调整 */
  overflow-y: auto;
}
.table-container th, .table-container td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  width: 33.33%; /* 三等分列宽，可根据列数调整 */
}

HTML 代码

<div class="container">
  <div class="top-panel">
    <h2>Top Panel</h2>
    <p>This content is always visible, as well as headers for table.</p>
  </div>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Row 1 Col1</td><td>Row 1 Col2</td><td>Row 1 Col3</td></tr>
        <tr><td>Row 2 Col1</td><td>Row 2 Col2</td><td>Row 2 Col3</td></tr>
        <tr><td>Row 3 Col1</td><td>Row 3 Col2</td><td>Row 3 Col3</td></tr>
        <tr><td>Row 4 Col1</td><td>Row 4 Col2</td><td>Row 4 Col3</td></tr>
        <tr><td>Row 5 Col1</td><td>Row 5 Col2</td><td>Row 5 Col3</td></tr>
        <tr><td>Row 6 Col1</td><td>Row 6 Col2</td><td>Row 6 Col3</td></tr>
        <tr><td>Row 7 Col1</td><td>Row 7 Col2</td><td>Row 7 Col3</td></tr>
        <tr><td>Row 8 Col1</td><td>Row 8 Col2</td><td>Row 8 Col3</td></tr>
        <tr><td>Row 9 Col1</td><td>Row 9 Col2</td><td>Row 9 Col3</td></tr>
        <tr><td>Row 10 Col1</td><td>Row 10 Col2</td><td>Row 10 Col3</td></tr>
        <tr><td>Row 11 Col1</td><td>Row 11 Col2</td><td>Row 11 Col3</td></tr>
        <tr><td>Row 12 Col1</td><td>Row 12 Col2</td><td>Row 12 Col3</td></tr>
      </tbody>
    </table>
  </div>
</div>

关键实现说明 #

• 容器布局：.container采用垂直flex布局，占满整个视口高度，overflow:hidden避免出现全局滚动条。
• 顶部面板固定：给.top-panel添加flex-shrink:0，确保其不会被下方的表格容器压缩，始终保持自身高度并固定在顶部。
• 表格容器占满剩余空间：.table-container通过flex:1占据容器剩余的所有空间，overflow:hidden限制表格的滚动范围。
• 表头与主体分离：将thead设置为display:table以保持表格布局，tbody设为display:block并指定高度，开启垂直滚动；同时通过table-layout:fixed和固定列宽保证表头与单元格对齐。
• 视觉优化：给thead添加背景色，避免滚动时tbody的内容穿透表头。

内容的提问来源于stack exchange，提问作者Lonli-Lokli