实现固定列左右滚动表格需拆分两个独立表格：左侧固定列用position: absolute或sticky定位，右侧主体列置于overflow-x: auto容器中，通过JS同步滚动与行高对齐，确保视觉一致性和兼容性。

实现固定列的左右滚动表格，核心思路是用两个独立的表格（或容器）分别承载“固定列”和“可滚动主体列”，通过 JavaScript 同步横向滚动，同时利用 CSS 控制布局与溢出行为。纯 HTML 表格标签（

）本身不支持原生固定列，必须结合

容器、CSS 定位和滚动事件协同完成。

结构分离：固定列与滚动区拆开

不要把所有列塞进一个

，而是拆成两个部分：

• 左侧固定列区域：一个独立

，设为固定宽度，position: sticky 或绝对定位（更可控）

右侧滚动主体区域：包裹在

内的另一个

，设置 overflow-x: auto

两部分表格的行高、表头高度需严格对齐（建议用 CSS 统一控制 line-height 和 height）

CSS 关键控制：定位 + 同步高度

固定列需脱离普通文档流，避免被滚动影响：

• 给固定列外层
  设 position: relative，内部表格设 position: sticky; left: 0; top: 0;（适用于表头固定）或 position: absolute（更稳定，但需手动控制 z-index 和宽高）
• 滚动区设 overflow-x: auto; overflow-y: hidden;，宽度设为 calc(100% - 固定列宽度)
• 所有

的 scrollTop 应与左侧表头一致（如有垂直滚动）

行高锁定：所有行用固定高度（如 height: 40px;），避免因内容撑开导致错行

简单同步示例：

scrollableDiv.addEventListener('scroll', () => {<br>  fixedHeader.style.transform = `translateX(${-scrollableDiv.scrollLeft}px)`;<br>});

（仅用于表头联动，固定列主体通常不移动）

兼容性与优化提示

移动端或旧浏览器需额外注意：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 避免在 iOS Safari 中使用 position: sticky 做固定列，优先用 position: absolute + JS 动态定位
• 给滚动容器加 -webkit-overflow-scrolling: touch; 提升 iOS 滚动流畅度
• 大量数据时，考虑虚拟滚动（只渲染可视区域行），否则 DOM 节点过多易卡顿
• 固定列数量不宜过多（一般 1–3 列），否则影响响应式体验和可读性

不复杂但容易忽略细节：固定列的边框、背景色、文字对齐方式，必须和主体列完全一致，否则视觉断裂感明显。动手前先统一单元格内边距、字体大小、white-space 处理（white-space: nowrap; 防换行）。

和	加 box-sizing: border-box;，避免 padding/border 导致宽度计算偏差 JavaScript 同步滚动（必需） 仅靠 CSS 无法让固定列随内容列一起横向滚动（它本就不该滚），但需确保用户拖动右侧滚动条时，视觉上“固定列始终在左、主体列左右滑动”——这本质是模拟。实际只需监听右侧容器的 scroll 事件，调整固定列容器的 transform: translateX(...)（可选）或保持不动（推荐）。真正要同步的是： 表头对齐：滚动时，右侧表头