移动端固定商品对比表首列需设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 上大概率错位或失效。

CSS工具箱(专业版)

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

下载

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

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

• table 默认是 table-layout: auto，列宽由内容撑开，sticky 元素无法稳定锚定 left 值
• 没有显式滚动容器，sticky 找不到“最近的可滚动祖先”，行为退化为 relative
• 移动端 WebKit（尤其是旧版 iOS Safari）对 sticky 在 <table> 内部的支持不一致，需强制触发重绘和层级隔离 <h3> <code>table-layout: fixed 必须设在 <table> 上，且首行单元格要定义宽度 <p>仅靠 <code>width 在 <th> 上设置不够稳定；必须让浏览器按第一行宽度统一整列。推荐做法： <ul><li>给 <code><table> 设置 <code>table-layout: fixed 和明确 width（如 width: max-content 或具体像素值）
• 在 <thead><tr> 的每个 <code><th> 上用 <code>width 或 min-width 显式声明，例如：<th style="width: 120px">参数</th>
• 避免用 flex 或 grid 替代 <table> —— 商品对比表语义强、屏幕阅读器依赖 <code><th scope="row">，改结构会破坏可访问性 <h3>包裹容器必须带 <code>overflow-x: auto 且启用平滑滚动

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

  立即学习“前端免费学习笔记（深入）”；

  • 容器不能只设 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%;
    }

  首列样式必须同时处理 <thead> 和 <code><tbody> 中的单元格 <p>只固定 <code><tbody> td:first-child 不够——表头首列（如“参数名”）也得固定，否则上下错位。正确选择器写法： <ul> <li> <code>thead th:first-child, tbody td:first-child —— 覆盖全部首列单元格

• left: 0 必须配 background-color（建议用 #fff）和 z-index: 2
• 若需固定末列，用 right: 0 + 单独 z-index: 1 避免遮挡首列
• 不要给 <thead> 整体设 <code>position: fixed —— 它会脱离表格流，导致宽度不同步、响应式断裂

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