使用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 - 通常建议将
<table>放在具有固定宽度的容器中，以便触发滚动条
2. HTML 结构示例
<div class="table-container"><table>
<tr>
<th class="fixed">姓名</th>
<td class="fixed">张三</td>
<td>年龄</td>
<td>城市</td>
<!-- 更多列 -->
</tr>
</table>
</div>
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 值：
立即学习“前端免费学习笔记（深入）”；
.th-second,.td-second {
position: sticky;
left: 80px; /* 宽度总和（第一列宽80）*/
z-index: 1;
background: white;
}
注意：left 数值应等于前面所有固定列的总宽度，否则会出现空隙或覆盖。
基本上就这些，不复杂但容易忽略细节。只要结构清晰、sticky 条件满足，就能实现平滑的列固定效果。
