移动端表格首列固定，其他列可滑动

本文深入解析了如何在移动端（屏幕宽度≤768px）优雅实现表格首列固定、其余列可水平滚动的交互效果，核心采用纯CSS方案——精准运用`position: sticky`配合媒体查询，仅对首列（如“Produto”）启用`left: 0`粘性定位，同时移除所有干扰性的非首列sticky声明，并通过`overflow-x: auto`、背景色填充、滚动条隐藏及最小宽度控制等细节确保表头对齐、内容不透出、输入框可用且无障碍友好；无需JavaScript即可在现代移动浏览器中稳定运行，特别适用于价格调研等多列数据录入场景，兼顾性能、兼容性与用户体验。

本文详解如何在移动设备（屏幕宽度 ≤768px）上实现表格首列（如“Produto”）始终固定可见，其余列支持水平滚动，同时保持表头对齐与交互可用性。核心依赖 position: sticky 与精准的媒体查询控制。

本文详解如何在移动设备（屏幕宽度 ≤768px）上实现表格首列（如“Produto”）始终固定可见，其余列支持水平滚动，同时保持表头对齐与交互可用性。核心依赖 `position: sticky` 与精准的媒体查询控制。

在构建数据密集型表单（如价格调研系统）时，常需在小屏设备上展示多列输入项，但又不能牺牲关键标识列（如产品名称）的可见性。理想的体验是：首列“钉住”不动，用户左右滑动查看/填写其余列，且所有单元格仍可正常聚焦、输入与格式化。本文提供一套经过验证的纯 CSS + HTML 实现方案，无需 JavaScript 操作 DOM，兼容现代移动端浏览器（Chrome、Safari、Firefox for iOS/Android）。

✅ 正确实现要点

关键在于精准控制 sticky 的作用范围。原始代码中存在一个常见误区：对非首列的 错误地应用了 position: sticky 并设置了 top: 0，这会干扰首列 left: 0 的粘性行为，导致表头错位甚至首列消失。

✅ 正确做法如下：

• 仅对首列（th.static-column, td.static-column）设置 position: sticky; left: 0; z-index: 1;；
• 移除所有 th:not(.static-column) 的 position: sticky 声明——它们不需要也不应被固定；
• 确保 .table-container 启用横向滚动，并隐藏默认滚动条以提升体验；
• 为粘性元素显式声明 background-color（如 white），避免滚动时内容透出；
• 表格需有足够最小宽度（如 min-width: 600px），确保在窄屏下触发滚动。

? 完整 CSS 修复版（适配移动端）

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 平滑滚动 */
}

/* 仅首列启用 sticky */
th.static-column,
td.static-column {
  position: sticky;
  left: 0;
  z-index: 10;
  background-color: white;
  border-right: 1px solid #ddd;
}

/* 可选：为表头第一行添加顶部粘性（独立于首列） */
/* 若需固定整个表头行（含首列），请另设 th:first-child 且不与其他 sticky 冲突 */

/* 隐藏横向滚动条（视觉优化） */
.table-container::-webkit-scrollbar {
  display: none;
}
.table-container {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}

/* 移动端专属：禁用非首列表头的 sticky —— 这是修复关键！ */
@media (max-width: 768px) {
  /* 删除以下错误规则（原问题代码中的冗余 sticky）：
     th:not(.static-column) { position: sticky; top: 0; ... }
     th:not(.static-column):first-child { left: 0; ... }
     td:not(.static-column):first-child { position: sticky; left: 0; ... }
  */
  /* ✅ 保留且仅保留首列 sticky 即可 */
}

? HTML 结构注意事项

确保表格结构语义清晰，并为固定列添加明确类名：

<div class="table-container">
  <table id="table_grupo">
    <thead>
      <tr>
        <th class="static-column">Produto</th> <!-- ✅ 必须加 static-column -->
        <th>Compra-Teresina</th>
        <th>Compra-Fortaleza</th>
        <th>Venda à Vista</th>
        <th>Venda a Prazo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="static-column">Gas. Comum</td> <!-- ✅ 每行首单元格也要加 -->
        <td>&lt;input type=&quot;text&quot; class=&quot;price&quot; onkeyup=&quot;formatCurrency(this)&quot;&gt;</td>
        <td>&lt;input type=&quot;text&quot; class=&quot;price&quot; onkeyup=&quot;formatCurrency(this)&quot;&gt;</td>
        <td>&lt;input type=&quot;text&quot; class=&quot;price&quot; onkeyup=&quot;formatCurrency(this)&quot;&gt;</td>
        <td>&lt;input type=&quot;text&quot; class=&quot;price&quot; onkeyup=&quot;formatCurrency(this)&quot;&gt;</td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

⚠️ 注意事项与最佳实践

• z-index 层级必须合理：首列 z-index: 10 应高于其他内容（默认为 auto 或 0），避免被遮挡；
• 背景色不可省略：background-color: white 是防止滚动时文字“透底”的必要样式；
• 移动端视口声明必需：确保 中包含 ；
• 输入框兼容性：inputmode="decimal" 提升软键盘体验，配合 onkeyup="formatCurrency(this)" 可做实时货币格式化（需自行实现该 JS 函数）；
• 无障碍考量：固定列仍需保持语义结构（如 用于表头），屏幕阅读器可正常识别；
• 性能提示：sticky 在复杂嵌套中可能影响渲染性能，建议将 .table-container 作为直接父容器，避免多层相对定位干扰。

通过以上配置，你将获得一个在桌面端正常流式布局、在手机端自动启用“冻结首列+横向滚动”的专业级表格组件——既满足数据录入效率，又保障用户体验一致性。

理论要掌握，实操不能落！以上关于《移动端表格首列固定，其他列可滑动》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！