可行，但必须放弃表格整体滚动思维，依赖外层容器overflow-x:auto提供滚动上下文，并严格满足table-layout:fixed、显式背景色、z-index分层及首尾列单元格单独sticky定位四个硬性前提。
直接结论：用 position: sticky 同时锁定首尾列可行，但必须放弃“把表格当整体来滚动”的惯性思维——真正起作用的不是 <table> 自身，而是它的外层容器和单元格的层级配合。
为什么 position: fixed 在表格里基本不可用
它会让 <thead> 或某列完全脱离文档流，导致两个硬伤：<tbody> 列宽自动收缩或撑开，和表头错位；固定列无法响应表格内部 table-layout: fixed 的列宽控制，左右一滚动就“漂”出去。更麻烦的是，fixed 元素要手动同步宽度、监听 scrollLeft、计算偏移——纯 CSS 场景下等于放弃维护性。
position: sticky 必须满足的 4 个硬性前提
- 外层容器（如
<div class="table-wrapper">）必须设overflow-x: auto，这是sticky生效的滚动祖先，缺了它整个机制不启动 -
<table>必须设table-layout: fixed，否则首列left: 0时会因内容长度不同而“抖动”或错位 - 所有粘性单元格（
th:first-child、th:last-child、td:first-child、td:last-child）必须显式声明background-color，不然滚动时下方内容会透上来 -
z-index分层不能省：th:first-child和td:first-child设z-index: 20；th:last-child和td:last-child设z-index: 19；左上/右上角单元格再加一层（如z-index: 30），否则交叉处会盖不住
首尾列同时 sticky 的样式写法与常见翻车点
关键不是“怎么写”，而是“在哪写”和“谁覆盖谁”。下面这段是实际生效的最小集合：
/* 外层容器 */
.table-wrapper {
overflow-x: auto;
}
<p>/<em> 表格本身 </em>/
table {
table-layout: fixed;
width: 100%;
}</p><p>/<em> 首列 + 尾列（含表头和数据行） </em>/
th:first-child,
td:first-child,
th:last-child,
td:last-child {
position: sticky;
background: #fff;
z-index: 20;
}</p><p>th:first-child,
td:first-child {
left: 0;
}</p><p>th:last-child,
td:last-child {
right: 0;
}容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 漏掉
td:last-child—— 只写了th:last-child，结果 tbody 最后一列根本不动 - 没给
th:first-child单独设z-index: 30—— 滚动到中间时，首列表头被后面某列的td盖住 - 在
.table-wrapper上加了transform或filter—— 这会创建新的层叠上下文，直接让sticky失效 - 用
white-space: nowrap强制单行，却忘了容器宽度不够时会撑破布局 —— 建议改用text-overflow: ellipsis+max-width
iOS Safari 和旧版 Chrome 的兼容补救
不是所有 sticky 都能原生支持双向（top + left/right）。iOS 15.4 之前、Chrome 56 之前，right: 0 在 sticky 上可能被忽略。补救方式只有两个：
- 对尾列单独加
backface-visibility: hidden或transform: translateZ(0)，强制触发硬件加速，唤醒部分旧引擎对right的识别 - 真要保底兼容，就别用
right: 0，改用 JavaScript 监听scrollLeft动态算left值 —— 但这就已经不是纯 CSS 方案了
真正难的从来不是贴几行 CSS，而是理解 sticky 的“滚动祖先依赖”和“层叠上下文隔离”：它只认最近那个有 overflow 的父级，且中间任何一层 z-index 断层，都会让整片冻结失效。
