可行，但必须放弃表格整体滚动思维，依赖外层容器overflow-x:auto提供滚动上下文，并严格满足table-layout:fixed、显式背景色、z-index分层及首尾列单元格单独sticky定位四个硬性前提。
直接结论：用 它会让 关键不是“怎么写”，而是“在哪写”和“谁覆盖谁”。下面这段是实际生效的最小集合： 容易踩的坑： 不是所有 sticky 都能原生支持双向（ 真正难的从来不是贴几行 CSS，而是理解 position: sticky 同时锁定首尾列可行，但必须放弃“把表格当整体来滚动”的惯性思维——真正起作用的不是 <table> 自身，而是它的外层容器和单元格的层级配合。<h3>为什么 <code>position: fixed 在表格里基本不可用
<thead> 或某列完全脱离文档流，导致两个硬伤：<code><tbody> 列宽自动收缩或撑开，和表头错位；固定列无法响应表格内部 <code>table-layout: fixed 的列宽控制，左右一滚动就“漂”出去。更麻烦的是，fixed 元素要手动同步宽度、监听 scrollLeft、计算偏移——纯 CSS 场景下等于放弃维护性。
position: sticky 必须满足的 4 个硬性前提<div class="table-wrapper">）必须设 <code>overflow-x: auto，这是 sticky 生效的滚动祖先，缺了它整个机制不启动<table> 必须设 <code>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;
}</p>
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 的兼容补救
top + left/right）。iOS 15.4 之前、Chrome 56 之前，right: 0 在 sticky 上可能被忽略。补救方式只有两个：
backface-visibility: hidden 或 transform: translateZ(0)，强制触发硬件加速，唤醒部分旧引擎对 right 的识别right: 0，改用 JavaScript 监听 scrollLeft 动态算 left 值 —— 但这就已经不是纯 CSS 方案了sticky 的“滚动祖先依赖”和“层叠上下文隔离”：它只认最近那个有 overflow 的父级，且中间任何一层 z-index 断层，都会让整片冻结失效。
