如何仅让表格tbody滚动，保持容器内h2及thead固定？

我正在用HTML、CSS和JavaScript开发一个CSV数据展示页面，表格放在flexbox容器的div里。目前容器设置了max-height: 95vh，表格高度超出时整个div会滚动，但我只希望表格的数据部分（<tbody>）滚动，<h2>标题和<thead>表头保持固定，只有表格内容超出容器最大高度时才滚动。试过display: block和position: sticky等方法都没达到预期效果，希望用纯HTML/CSS/JS解决。

要实现仅<tbody>滚动的效果，核心是拆分表格的表头和数据区域的布局逻辑，让<tbody>成为独立的可滚动块，同时保证表头与数据列的宽度对齐。具体修改如下：

• 调整容器布局：将.csv容器改为flex垂直布局，隐藏容器自身的溢出，让内部元素按空间分配规则排列
• 固定标题与表头：给标题设置flex-shrink: 0防止被压缩，将<thead>设为独立的表格结构保持布局
• 实现tbody滚动：将<tbody>设为块级元素，设置最大高度和垂直滚动属性，同时让每行保持表格布局以对齐列宽

修改后的完整代码 #

HTML #

<!DOCTYPE html>
<html>

<head>
  <title>CSV</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="container">
    <div class="csv">
      <h2>CSV</h2>
      <table id="csv-table">
        <thead>
          <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
          </tr>
        </thead>
        <tbody>
          <!-- Dynamically generated rows will be added here -->
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>

CSS #

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #d9efa1;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1024px;
  margin: 0 auto;
  padding: 5%;
}

.csv {
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 3%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.csv h2 {
  margin-top: 1%;
  margin-bottom: 3%;
  margin-left: 0.1%;
  color: #f6b40e;
  flex-shrink: 0;
}

.csv table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  display: block;
  flex-grow: 1;
}

.csv table thead {
  display: table;
  width: 100%;
}

.csv table thead th {
  background-color: #f6b40e;
  color: #FFFFFF;
  padding: 3%;
  text-align: left;
  width: calc(100% / 3);
}

.csv table tbody {
  display: block;
  max-height: calc(100% - 60px);
  overflow-y: auto;
  width: 100%;
}

.csv table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.csv table tbody tr:nth-child(even) {
  background-color: #F3F2F1;
}

.csv table tbody td {
  padding: 3%;
  word-wrap: break-word;
  width: calc(100% / 3);
}

JavaScript #

// Define CSV data here
const testData = `Value1A,Value1B,Value1C
Value2A,Value2B,Value2C
Value3A,Value3B,Value3C
Value4A,Value4B,Value4C
Value5A,Value5B,Value5C
Value6A,Value6B,Value6C
Value7A,Value7B,Value7C
Value8A,Value8B,Value8C
Value9A,Value9B,Value9C
Value10A,Value10B,Value10C
Value11A,Value11B,Value11C
Value12A,Value12B,Value12C
Value13A,Value13B,Value13C
Value14A,Value14B,Value14C
Value15A,Value15B,Value15C`;

// Split the CSV data
let rows = testData.split("\n");

// Add table tags to each row and cell
let table = "";
rows.forEach(function(row) {
  const columns = row.split(/,(?=(?:[^"]*"[^"]*")*(?![^"]*"))/);
  table += `<tr>`;

  // Iterate over each column
  columns.forEach(function(column) {
    table += "<td>" + column.replace(/^"(.*)"$/, "$1") + "</td>";
  });

  table += `</tr>`;
});

// Update the table body
const tbody = document.querySelector("#csv-table tbody");
tbody.innerHTML = table;

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