移动端固定商品对比表首列需设table-layout:fixed、显式列宽、带-webkit-overflow-scrolling:touch的relative容器，并为thead th:first-child和tbody td:first-child同时设left:0/背景/z-index。

移动端商品对比表格固定首列，用 position: sticky 是可行的，但必须配合 table-layout: fixed 和容器滚动控制，否则在 iOS Safari 或 Android Chrome 上大概率错位或失效。

为什么直接给 td:first-child 加 position: sticky 会失效

常见现象是：首列随滚动消失、背景透出、水平偏移、甚至整个表格塌陷。根本原因有三个：

• table 默认是 table-layout: auto，列宽由内容撑开，sticky 元素无法稳定锚定 left 值
• 没有显式滚动容器，sticky 找不到“最近的可滚动祖先”，行为退化为 relative
• 移动端 WebKit（尤其是旧版 iOS Safari）对 sticky 在 内部的支持不一致，需强制触发重绘和层级隔离

  table-layout: fixed 必须设在

  上，且首行单元格要定义宽度

  仅靠 width 在

  上设置不够稳定；必须让浏览器按第一行宽度统一整列。推荐做法：

  • 给 设置 table-layout: fixed 和明确 width（如 width: max-content 或具体像素值）
  • 在
  的每个
  • 避免用 flex 或 grid 替代

  上用 width 或 min-width 显式声明，例如：	参数

  —— 商品对比表语义强、屏幕阅读器依赖 和 中的单元格

  只固定

  td:first-child 不够——表头首列（如“参数名”）也得固定，否则上下错位。正确选择器写法：
  • thead th:first-child, tbody td:first-child —— 覆盖全部首列单元格
  • left: 0 必须配 background-color（建议用 #fff）和 z-index: 2
  • 若需固定末列，用 right: 0 + 单独 z-index: 1 避免遮挡首列
  • 不要给
  整体设 position: fixed —— 它会脱离表格流，导致宽度不同步、响应式断裂

  最易被忽略的是：iOS Safari 对 sticky 在表格内的支持仍依赖父容器高度是否“可测量”。如果容器高度由内容撑开（height: auto），某些版本会拒绝触发粘性行为。保险做法是给容器加 max-height 或明确 height，哪怕只是 height: fit-content。

  ，改结构会破坏可访问性

  包裹容器必须带 overflow-x: auto 且启用平滑滚动

  移动端横向滚动卡顿、首列跳动，90% 出自容器配置缺失。关键点：

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载

  • 容器不能只设 overflow-x: auto，还要加 -webkit-overflow-scrolling: touch（iOS Safari 必需）
  • 容器需设 position: relative，否则 sticky 的 z-index 层级可能被截断
  • 首列单元格必须设 background-color（不能透明）和 z-index: 2，否则滚动时内容会从下方透出
  • 示例容器样式：

    .compare-table-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      position: relative;
      width: 100%;
    }

  首列样式必须同时处理

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！