如何让固定表头与首列的HTML表格适配窗口尺寸？

问题根源 #

你之前的方案用display: block分离thead和tbody，虽然能实现初步锁定，但破坏了表格原生的列宽对齐机制。当把固定宽高改成窗口尺寸时，thead和tbody的宽高无法同步，加上CSS不能直接使用window.innerWidth这类JS属性，最终导致锁定功能失效。

修复方案：改用Sticky定位+容器滚动 #

放弃display: block的分离方式，利用CSSposition: sticky实现锁定，同时通过外层容器控制滚动范围，适配窗口尺寸。

1. HTML结构调整

给表格套一个容器，用来控制可视区域和滚动：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>固定首列表头</th>
        <th>列2</th>
        <th>列3</th>
        <!-- 更多列 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>固定首列内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <!-- 更多行 -->
    </tbody>
  </table>
</div>

2. 修改后的CSS代码

/* 滚动容器：适配窗口尺寸，预留边距 */
.table-container {
  width: calc(100vw - 40px); /* 100vw是窗口宽度，减去左右边距 */
  height: calc(100vh - 100px); /* 100vh是窗口高度，减去顶部导航/边距 */
  overflow: auto;
  margin: 20px auto;
}

/* 表格基础样式：保持原生布局，确保列对齐 */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffd699;
  /* 可选：固定列宽，避免内容撑开导致错位 */
  table-layout: fixed;
}

/* 表头固定：sticky定位在顶部 */
thead th {
  position: sticky;
  top: 0;
  background-color: #ffd699; /* 背景色覆盖下方滚动内容 */
  border: 1px solid white;
  z-index: 1;
}

/* 首列固定：表头和内容都sticky在左侧 */
thead th:nth-child(1),
tbody td:nth-child(1) {
  position: sticky;
  left: 0;
  background-color: #ffd699; /* 背景色覆盖右侧滚动内容 */
  z-index: 2; /* 确保首列在表头上方 */
}

/* 单元格基础样式 */
th, td {
  padding: 8px;
  text-align: left;
  border: 1px solid white;
}

3. 可选：JS动态适配（处理滚动条/其他元素）

如果需要更精确的尺寸计算（比如考虑滚动条宽度、页面其他元素占用空间），可以用JS动态设置容器尺寸：

function adjustContainerSize() {
  const container = document.querySelector('.table-container');
  // 计算可用宽度：窗口宽度 - body内边距*2 - 滚动条宽度（估算16px）
  const availableWidth = window.innerWidth - 
    parseInt(getComputedStyle(document.body).paddingLeft) * 2 - 16;
  // 计算可用高度：窗口高度 - body内边距*2 - 滚动条宽度
  const availableHeight = window.innerHeight - 
    parseInt(getComputedStyle(document.body).paddingTop) * 2 - 16;
  
  container.style.width = `${availableWidth}px`;
  container.style.height = `${availableHeight}px`;
}

// 初始化和窗口 resize 时触发
window.addEventListener('load', adjustContainerSize);
window.addEventListener('resize', adjustContainerSize);

关键说明 #

• 去掉thead和tbody的display: block，保留表格原生布局，确保列宽自动对齐。
• sticky定位依赖父容器的滚动，所以外层容器必须设置overflow: auto。
• 给固定的表头和首列设置背景色，避免滚动时被下方/右侧内容穿透。

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