如何在固定高度容器中创建可滚动表格

安全阿岳

2026-5-7

Hey，我来帮你搞定这个固定高度表格滚动的问题！先看一下你的代码里的核心问题，然后给你两种解决方案，还有无限滚动的小提示~

问题出在哪？

你的代码有两个关键问题导致滚动不生效：

HTML结构错误：第一个<tbody>标签没闭合就直接开了新的<tbody>，DOM结构乱了，样式渲染肯定受影响；
CSS没配置滚动容器：虽然.column设了固定高度，但没开垂直滚动，表格内容超出后直接溢出容器，自然不会出现滚动条。

解决方案（两种可选）

方案1：表格整体在容器内滚动（表头随内容滚动）

这个方案最简单，适合不需要固定表头的场景：

先修复HTML结构（把没闭合的<tbody>补上）：

<!DOCTYPE html>
<html>
<head>
  <title>Fixed Height Scrollable Table</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="\css\core.css" media="screen" />
</head>
<body>
  <div class="container">
    <div class="box">
      <div class="row">
        <div class="column">
          <table class="table">
            <thead>
              <tr>
                <th>TIME</th>
                <th>TICKER</th>
                <th>CALL/PUT</th>
                <th>EXPIRY</th>
                <th>STRIKE</th>
                <th>SPOT</th>
                <th>PRICE</th>
                <th>SIZE</th>
                <th>PREMIUM</th>
                <th>OI</th>
                <th>IV</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>00:12:34</td>
                <td style="color: orange;">BTC</td>
                <td style="color:#ff3366;">PUT</td>
                <td>4/28</td>
                <td>$7800</td>
                <td>$7219</td>
                <td>₿0.031</td>
                <td>20</td>
                <td>₿62</td>
                <td>60.9%</td>
                <td>1120</td>
              </tr>
              <!-- 其他行保留不变 -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

修改后的CSS：

@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
@charset "utf-8";

body {
  background-color: #060c17;
  font-family: 'Overpass', sans-serif;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 让容器垂直居中生效 */
}

.box {
  background-color: #0c1427;
  border: 2px solid #172340;
  background-clip: border-box;
  border-radius: 0.25rem;
}

.row {
  display: flex;
}

.column {
  padding: 10px;
  display: flex;
  height: 690px; /* 固定容器高度 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  overflow-x: hidden; /* 隐藏水平滚动条（可选） */
}

.table {
  border-collapse: collapse;
  margin: 20px;
  font-size: 14px;
  width: calc(100% - 40px); /* 让表格适配容器宽度 */
}

thead {
  color: #7886a1;
}

tbody {
  color: white;
}

.table thead th {
  text-align: left;
  border-bottom: 2px solid #262f43;
  padding: 25px;
}

.table tbody td {
  text-align: left;
  border-bottom: 2px solid #262f43;
  padding: 25px;
}

tbody tr:hover {
  background-color: #060c17;
}

/* 自定义滚动条（可选，提升颜值） */
.column::-webkit-scrollbar {
  width: 8px;
}

.column::-webkit-scrollbar-track {
  background: #0c1427;
}

.column::-webkit-scrollbar-thumb {
  background: #262f43;
  border-radius: 4px;
}

.column::-webkit-scrollbar-thumb:hover {
  background: #172340;
}

核心修改：给.column加了overflow-y: auto，当表格内容超过690px时自动触发滚动；同时让表格宽度适配容器，避免水平溢出。

方案2：固定表头，仅tbody滚动（用户体验更好）

如果希望表头一直固定在顶部，只有内容滚动，用这个方案：

HTML结构和方案1一样，只需要修改CSS：

@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
@charset "utf-8";

body {
  background-color: #060c17;
  font-family: 'Overpass', sans-serif;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.box {
  background-color: #0c1427;
  border: 2px solid #172340;
  background-clip: border-box;
  border-radius: 0.25rem;
}

.row {
  display: flex;
}

.column {
  padding: 10px;
  display: block;
  height: 690px;
  overflow: hidden;
}

.table {
  border-collapse: collapse;
  margin: 20px;
  font-size: 14px;
  width: calc(100% - 40px);
  display: block; /* 把表格改成块级元素，方便拆分表头和内容 */
}

thead {
  color: #7886a1;
  position: sticky; /* 固定表头 */
  top: 0;
  background-color: #0c1427; /* 加背景色避免被内容遮挡 */
  display: table-header-group;
}

tbody {
  color: white;
  display: block;
  max-height: calc(690px - 120px); /* 容器高度减去表头+内边距的高度 */
  overflow-y: auto; /* 开启内容滚动 */
}

/* 固定列宽，确保表头和内容对齐 */
.table thead th, .table tbody td {
  text-align: left;
  border-bottom: 2px solid #262f43;
  padding: 25px;
  width: 100px; /* 可以根据实际需求调整每个列的宽度 */
}

tbody tr:hover {
  background-color: #060c17;
}

/* 自定义滚动条 */
tbody::-webkit-scrollbar {
  width: 8px;
}

tbody::-webkit-scrollbar-track {
  background: #0c1427;
}

tbody::-webkit-scrollbar-thumb {
  background: #262f43;
  border-radius: 4px;
}

tbody::-webkit-scrollbar-thumb:hover {
  background: #172340;
}

核心逻辑：用position: sticky固定表头，给tbody设置最大高度和滚动属性，同时固定列宽避免错位。

无限滚动的JavaScript实现提示

要实现无限滚动，只需要监听tbody的滚动事件，判断滚动条是否接近底部，然后追加新行：

const tbody = document.querySelector('.table tbody');

// 监听滚动事件
tbody.addEventListener('scroll', () => {
  // 当滚动条距离底部小于50px时，加载新行
  if (tbody.scrollTop + tbody.clientHeight >= tbody.scrollHeight - 50) {
    appendNewRows();
  }
});

// 追加新行的函数
function appendNewRows() {
  const newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td>00:12:34</td>
    <td style="color: orange;">BTC</td>
    <td style="color:#ff3366;">PUT</td>
    <td>4/28</td>
    <td>$7800</td>
    <td>$7219</td>
    <td>₿0.031</td>
    <td>20</td>
    <td>₿62</td>
    <td>60.9%</td>
    <td>1120</td>
  `;
  tbody.appendChild(newRow);
}

这样就能实现滚动加载的效果啦！

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

如何在固定高度容器中创建可滚动表格

问题出在哪？ #

解决方案（两种可选） #

方案1：表格整体在容器内滚动（表头随内容滚动）

方案2：固定表头，仅tbody滚动（用户体验更好）

无限滚动的JavaScript实现提示 #

问题出在哪？

解决方案（两种可选）

无限滚动的JavaScript实现提示