如何设置表格仅冻结第10-12行，滚动时保持其可见？

完全可行，下面提供两种实现思路，优先推荐CSS原生方案，简洁高效；如果需要兼容旧浏览器，可选用JavaScript辅助方案。

方案一：CSS position: sticky 原生实现 #

这是最简洁的方式，利用CSS的sticky定位特性，让目标行在滚动到容器顶部时自动固定。

代码示例 #

HTML结构

<!-- 带滚动的容器，必须设置固定高度触发滚动 -->
<div class="table-container">
  <table>
    <tbody>
      <!-- 第1-9行：随滚动正常移动 -->
      <tr><td>行1</td></tr>
      <tr><td>行2</td></tr>
      <tr><td>行3</td></tr>
      <tr><td>行4</td></tr>
      <tr><td>行5</td></tr>
      <tr><td>行6</td></tr>
      <tr><td>行7</td></tr>
      <tr><td>行8</td></tr>
      <tr><td>行9</td></tr>
      <!-- 第10-12行：滚动到顶部后固定 -->
      <tr class="sticky-row"><td>行10（固定）</td></tr>
      <tr class="sticky-row"><td>行11（固定）</td></tr>
      <tr class="sticky-row"><td>行12（固定）</td></tr>
      <!-- 第13行及以后：正常滚动 -->
      <tr><td>行13</td></tr>
      <tr><td>行14</td></tr>
      <tr><td>行15</td></tr>
      <!-- 可添加更多行测试滚动 -->
    </tbody>
  </table>
</div>

CSS样式

.table-container {
  overflow-y: auto;
  height: 400px; /* 根据需求设置容器高度 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 10px;
  border: 1px solid #eee;
}

.sticky-row {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 必须设置背景色，避免下方内容穿透 */
}

关键注意事项 #

• 容器必须设置固定高度，否则无法触发垂直滚动。
• 固定行一定要设置background-color，否则滚动时下方内容会透过固定行显示。
• 兼容性：现代浏览器（Chrome、Firefox、Edge、Safari 6.1+）都支持position: sticky，无需额外JS。

方案二：JavaScript辅助实现（兼容旧浏览器） #

如果需要兼容IE等不支持sticky的旧浏览器，可以通过监听滚动事件动态控制行的定位。

代码示例 #

HTML结构

同方案一的HTML结构。

CSS样式

.table-container {
  overflow-y: auto;
  height: 400px;
  transition: padding-top 0.1s;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 10px;
  border: 1px solid #eee;
}

.sticky-row {
  background-color: #ffffff;
}

/* 固定状态的样式 */
.sticky-row.fixed {
  position: fixed;
  top: 0;
  width: calc(100% - 17px); /* 减去滚动条宽度，避免错位 */
}

/* 容器添加内边距，避免固定行覆盖表格内容 */
.table-container.fixed-active {
  padding-top: 66px; /* 等于3个固定行的总高度（每行22px，根据实际调整） */
}

JavaScript逻辑

const container = document.querySelector('.table-container');
const stickyRows = document.querySelectorAll('.sticky-row');
const firstStickyRow = stickyRows[0];

// 计算第10行到容器顶部的初始偏移量
const stickyTriggerOffset = firstStickyRow.offsetTop;

// 监听滚动事件
container.addEventListener('scroll', () => {
  const scrollDistance = container.scrollTop;
  
  if (scrollDistance >= stickyTriggerOffset) {
    // 滚动到触发位置，添加固定类
    stickyRows.forEach(row => row.classList.add('fixed'));
    container.classList.add('fixed-active');
  } else {
    // 未触发，移除固定类
    stickyRows.forEach(row => row.classList.remove('fixed'));
    container.classList.remove('fixed-active');
  }
});

关键注意事项 #

• 必须准确计算固定行的总高度，设置容器对应的padding-top，否则会出现内容重叠。
• 滚动条宽度（通常17px）需要根据浏览器实际情况调整，避免固定行宽度错位。

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