使用 position: sticky 和 left: 0 可固定表格首列；2. 配合 table-layout: fixed 与容器 overflow-x: auto，确保布局稳定并支持横向滚动，首列始终可见，兼容性好，实现简单。
在表格中固定首列，同时允许其他列横向滚动，是常见且实用的布局需求。使用 css 的 position: sticky 可以轻松实现这一效果，无需 javaScript 或复杂结构。
1. 基本原理：left: 0 与 position: sticky
要让表格的首列固定在左侧，关键在于为该列的单元格设置：
- position: sticky：使元素在滚动时“粘”在视窗特定位置
- left: 0：指定粘性定位的基准距离左侧 0 像素
- background：建议设置背景色，防止内容重叠
- z-index：确保固定列显示在其他列之上
2. html 结构示例
一个标准的表格结构即可：
| 姓名 | 年龄 | 城市 | 职业 |
|---|---|---|---|
| 张三 | 28 | 北京 | 工程师 |
3. 核心 CSS 样式
添加以下样式即可实现首列固定：
立即学习“前端免费学习笔记（深入）”；
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* 更好控制列宽 */
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
/* 固定首列 */
.fixed {
position: sticky;
left: 0;
background-color: #fff;
z-index: 10;
}
注意：table-layout: fixed 能确保列宽均匀或按设定分配，避免 sticky 元素因自动布局错位。
4. 容器需可横向滚动
表格必须能横向滚动，sticky 才有意义。将 table 包裹在容器中并设置：
.table-container {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
这样当内容超出容器宽度时，用户可以左右滑动查看数据，而首列始终保持可见。
基本上就这些。只需给首列加 position: sticky 和 left: 0，再确保表格可滚动，就能实现流畅的固定列效果。兼容性良好，现代浏览器均支持。不复杂但容易忽略细节。