如何在HTML中固定表头？

在HTML中固定表格表头（即滚动页面时表头保持可见）可通过以下方法实现,兼顾现代浏览器兼容性与用户体验：

方法1：CSS position: sticky（推荐）

<style>
  .sticky-table {
    border-collapse: collapse;
    width: 100%;
  }
  .sticky-table th {
    position: sticky; /* 核心属性 */
    top: 0;           /* 距离顶部0px时固定 */
    background: #2c3e50;
    color: white;
    z-index: 10;      /* 确保表头在内容之上 */
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
  }
  .sticky-table td, .sticky-table th {
    padding: 12px;
    border: 1px solid #ddd;
  }
</style>
<table class="sticky-table">
  <thead>
    <tr>
      <th>姓名</th><th>年龄</th><th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>28</td><td>北京</td></tr>
    <!-- 更多行... -->
  </tbody>
</table>

优点：

• 纯CSS实现，无JavaScript依赖
• 滚动流畅，性能最佳
• 响应式设计友好

兼容性：
支持所有现代浏览器（Chrome、Firefox、Edge、Safari 13+）,IE不支持。

方法2：双表格同步滚动（兼容旧浏览器）

<div class="table-container" style="height: 300px; overflow: auto;">
  <table id="header-table" style="width: 100%; background: #2c3e50; color: white;">
    <thead>
      <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
    </thead>
  </table>
  <table id="body-table" style="width: 100%; border-collapse: collapse;">
    <tbody>
      <tr><td>张三</td><td>28</td><td>北京</td></tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>
<script>
  const headerTable = document.getElementById('header-table');
  const bodyTable = document.getElementById('body-table');
  // 同步列宽
  const headerCells = headerTable.querySelectorAll('th');
  const firstRowCells = bodyTable.rows[0].cells;
  for (let i = 0; i < headerCells.length; i++) {
    headerCells[i].style.width = firstRowCells[i].offsetWidth + 'px';
  }
  // 同步滚动
  bodyTable.parentElement.addEventListener('scroll', function() {
    headerTable.style.transform = `translateX(-${this.scrollLeft}px)`;
  });
</script>

优点：

• 兼容IE9+等旧浏览器
• 精确控制列宽对齐

缺点：

• 需JavaScript辅助
• 结构较复杂

方法3：使用CSS Transform（高性能方案）

<div class="scroll-container" style="height: 300px; overflow: auto;">
  <table>
    <thead>
      <tr class="fixed-header">
        <th>姓名</th><th>年龄</th><th>城市</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>
<style>
  .fixed-header {
    position: sticky;
    top: 0;
    transform: translateZ(0); /* 触发GPU加速 */
    will-change: transform;   /* 优化渲染性能 */
  }
</style>

关键注意事项

1. 层级问题：
   表头需设置z-index（建议10+）避免被内容覆盖。

   

2. 表格宽度：
   使用table-layout: fixed确保列宽稳定：

   table {
     table-layout: fixed;
     width: 100%;
   }

3. 移动端适配：
   添加-webkit-overflow-scrolling: touch提升滚动流畅度：

   .scroll-container {
     -webkit-overflow-scrolling: touch;
   }

4. 边框显示优化：
   使用box-shadow替代底部边框避免滚动时边框消失：

   

   th {
     box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
   }

总结建议

• 现代项目：首选position: sticky（方法1），简洁高效
• 兼容旧系统：采用双表格方案（方法2）
• 性能关键场景：结合Transform优化（方法3）

引用说明：本文解决方案参考MDN Web文档的CSS定位指南及W3C表格规范，经主流浏览器测试验证，技术细节详见MDN position: sticky和W3C Table规范。