使用CSS的position: sticky可实现表格列固定，需设置sticky定位和left偏移，并确保父容器有overflow-x滚动及层叠上下文。1. 基本结构要求包括可滚动容器和设为sticky的列；2. HTML中将table置于可滚动div内；3. CSS为固定列设left:0、z-index和背景色；4. 多列固定时按前缀宽度和设置left值，避免空隙或覆盖。
使用 CSS 的 position: sticky 可以轻松实现表格列固定效果，尤其适用于需要横向滚动时保持某些列可见的场景。关键在于为需要固定的列设置 position: sticky 和对应的 left 偏移值，并确保父容器有明确的层叠上下文和滚动机制。
1. 基本结构要求
要让 sticky 生效，表格或其祖先元素需满足以下条件：
- 表格本身或外层容器需要可以横向滚动（例如设置
overflow-x: auto） - 固定列所在的单元格必须设置
position: sticky - 通常建议将
放在具有固定宽度的容器中，以便触发滚动条
2. HTML 结构示例
姓名
张三
年龄
城市
3. 核心 CSS 设置
为第一列添加固定样式：
.table-container {
overflow-x: auto;
width: 100%;
}table {
border-collapse: collapse;
min-width: 800px; / 模拟宽表 /
}th, td {
padding: 10px;
text-align: left;
background: #fff;
}/ 固定第一列 / .fixed {
position: sticky;
left: 0;
z-index: 1;
background-color: #fff;
}说明：
-left: 0表示该列始终贴住容器左侧
-z-index: 1确保它显示在其他非固定列之上
- 背景色必须显式设置，避免滚动时内容重叠看不清4. 多列固定技巧
若需固定前两列，分别设置不同的
left值：
情感家园企业站5.0 多语言多风格版下载一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
立即学习“前端免费学习笔记（深入）”；
.th-second,
.td-second {
position: sticky;
left: 80px; /* 宽度总和（第一列宽80）*/
z-index: 1;
background: white;
}注意：left 数值应等于前面所有固定列的总宽度，否则会出现空隙或覆盖。
基本上就这些，不复杂但容易忽略细节。只要结构清晰、sticky 条件满足，就能实现平滑的列固定效果。
