HTML表格双固定列+固定表头+滚动主体实现方案求助

阿华AIGC实验室

2026-5-26

我完全懂你这种困扰——想要原生HTML Table实现表头固定、前两列固定、表格主体可横向/纵向滚动，搜了一圈要么只支持单列固定，要么干脆抛弃table用div模拟，第三方库又会打乱原生table结构，动态列的情况下初始化配置还特别麻烦。

这里给你一个纯原生的实现方案，完全保留table标签结构，适配动态列，亲测可行：

核心思路

利用CSS position: sticky 实现表头和固定列的定位，搭配一个带滚动的容器包裹表格，再用JS动态计算固定列的偏移量适配宽度变化。

完整代码示例

HTML结构

<div class="table-wrapper">
  <table class="sticky-table">
    <thead>
      <tr>
        <th class="fixed-col">固定列1</th>
        <th class="fixed-col">固定列2</th>
        <th>动态列3</th>
        <th>动态列4</th>
        <th>动态列5</th>
        <th>动态列6</th>
        <!-- 更多动态生成的列 -->
      </tr>
    </thead>
    <tbody>
      <!-- 动态生成的表格行 -->
      <tr>
        <td class="fixed-col">行1-1</td>
        <td class="fixed-col">行1-2</td>
        <td>行1-3</td>
        <td>行1-4</td>
        <td>行1-5</td>
        <td>行1-6</td>
      </tr>
      <tr>
        <td class="fixed-col">行2-1</td>
        <td class="fixed-col">行2-2</td>
        <td>行2-3</td>
        <td>行2-4</td>
        <td>行2-5</td>
        <td>行2-6</td>
      </tr>
      <!-- 更多行 -->
    </tbody>
  </table>
</div>

CSS样式

/* 外层容器：控制滚动区域 */
.table-wrapper {
  width: 100%;
  max-height: 450px; /* 表格主体超过这个高度就纵向滚动 */
  overflow: auto;
}

/* 表格基础样式 */
.sticky-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 可选，帮助列宽更稳定，动态列时可根据需求调整 */
}

.sticky-table th,
.sticky-table td {
  border: 1px solid #eee;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap; /* 避免内容换行，可选 */
}

/* 表头固定 */
.sticky-table thead tr {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 1; /* 保证表头在表体上方 */
}

/* 第一列固定在左侧 */
.fixed-col:nth-child(1) {
  position: sticky;
  left: 0;
  background-color: #f8f9fa;
  z-index: 2; /* 比表头层级高，避免被表头覆盖 */
}

/* 第二列固定在第一列右侧 */
.fixed-col:nth-child(2) {
  position: sticky;
  /* 初始值可以随便写，后面用JS动态计算 */
  left: 0;
  background-color: #f8f9fa;
  z-index: 2;
}

JS适配动态列与窗口变化

// 动态计算第二固定列的偏移量
function adjustFixedColPosition() {
  const firstFixedCol = document.querySelector('.sticky-table .fixed-col:nth-child(1)');
  if (!firstFixedCol) return;
  
  // 获取第一列的实际宽度（包含padding、border）
  const firstColWidth = firstFixedCol.offsetWidth;
  // 给所有第二列设置left值
  document.querySelectorAll('.sticky-table .fixed-col:nth-child(2)')
    .forEach(col => col.style.left = `${firstColWidth}px`);
}

// 初始化时执行，窗口大小变化时重新计算
window.addEventListener('DOMContentLoaded', adjustFixedColPosition);
window.addEventListener('resize', adjustFixedColPosition);

// 如果是动态生成表格列/行，生成后记得调用这个函数
// 比如：generateDynamicColumns(); adjustFixedColPosition();