如何用纯 CSS 实现 HTML 表格首列固定（冻结）与主体可滚动效果-html教程-PHP中文网

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

a style="color:#f60; text-decoration:underline;" title= "html"href="https://m.php.cn/zt/15763.html" target="_blank">html>

如何用纯 CSS 实现 HTML 表格首列固定（冻结）与主体可滚动效果

本文介绍一种轻量、兼容性良好的纯 CSS 方案，通过分离固定列与滚动区域并结合 position: sticky 和 JavaScript 同步滚动，实现首列（如行标题）始终可见、右侧数据区域水平/垂直滚动的表格布局。

本文介绍一种轻量、兼容性良好的纯 css 方案，通过分离固定列与滚动区域并结合 `position: sticky` 和 javascript 同步滚动，实现首列（如行标题）始终可见、右侧数据区域水平/垂直滚动的表格布局。

在复杂表单或保险配置类 UI 中（如您提供的嵌套表格结构），常需将左侧标签列（如“Aggregate Limit Of Liability”“Ransomware Sublimit”等）固定显示，而右侧多列动态内容支持横向滚动浏览——但原生

 无法直接实现“仅冻结第一列”的效果。本文提供一个无需第三方库、不依赖 position: absolute 错位模拟、且适配嵌套组件结构的可靠方案。核心思路：结构分离 + 滚动同步
关键在于打破单个

的限制，将“固定首列”与“可滚动主体”拆分为两个独立的容器，各自包裹语义化

： .fixed-column：仅包含首列数据（

或	），宽度固定，背景色统一，确保视觉对齐； `.scrollable-table`：承载其余所有列，启用 `overflow-x: auto` 实现横向滚动，并利用 `thead th { position: sticky; top: 0 }` 固定表头；外层 `.table-container` 设置 `display: flex` + `overflow: auto`，统一控制整体高度与纵向滚动；通过极简 JavaScript 监听容器滚动事件，同步 `.scrollable-table` 的 `scrollTop`，保证左右两列垂直滚动一致。完整可运行示例 @@######@@

或

），宽度固定，背景色统一，确保视觉对齐；

.scrollable-table：承载其余所有列，启用 overflow-x: auto 实现横向滚动，并利用 thead th { position: sticky; top: 0 } 固定表头；

外层 .table-container 设置 display: flex + overflow: auto，统一控制整体高度与纵向滚动；

通过极简 JavaScript 监听容器滚动事件，同步 .scrollable-table 的 scrollTop，保证左右两列垂直滚动一致。