本文详解如何在移动设备（屏幕宽度 ≤768px）上实现表格首列（如“produto”）始终固定可见，其余列支持水平滚动，同时确保表头与数据行对齐、样式一致且交互友好。
本文详解如何在移动设备（屏幕宽度 ≤768px）上实现表格首列（如“produto”）始终固定可见，其余列支持水平滚动，同时确保表头与数据行对齐、样式一致且交互友好。
在构建数据录入型表格（如油价调研表）时，常需兼顾可读性与空间效率：首列作为标识项（如产品名称）必须始终可见，而横向扩展的多列价格字段在小屏设备上易超出视口。理想的解决方案是——仅在移动端启用水平滚动容器，并通过 position: sticky 精准锁定首列，同时避免误锁其他列导致视觉错位。
✅ 正确实现要点
关键在于精准控制 sticky 的作用范围。原 CSS 中存在一个常见陷阱：
@media (max-width: 768px) {
th:not(.static-column) {
position: sticky; /* ❌ 错误：此规则会将非首列的表头也设为 sticky，干扰首列定位 */
top: 0;
background-color: white;
z-index: 2;
}
}
该规则 unintendedly 将 Compra-Teresina、Venda à Vista 等列头也设为 sticky，导致其脱离文档流并覆盖首列，造成“Produto”消失的假象。只需移除这一行即可修复核心问题。
✅ 推荐精简版 CSS（已优化）
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* 提升 iOS 滚动流畅度 */
}
/* 移动端专属：仅首列 sticky，其余列自由滚动 */
@media (max-width: 768px) {
.table-container {
width: 100%;
}
/* 首列（th 和 td）固定 */
th.static-column,
td.static-column {
position: sticky;
left: 0;
background-color: #fff;
z-index: 3;
border-right: 1px solid #ddd;
}
/* 隐藏滚动条（保持界面简洁） */
.table-container::-webkit-scrollbar {
display: none;
}
.table-container {
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: none; /* Firefox */
}
}
✅ HTML 结构关键要求
确保首列单元格显式添加 .static-column 类：
| Produto | Compra-Teresina | Compra-Fortaleza | Venda à Vista | Venda a Prazo |
|---|---|---|---|---|
| Gas. Comum |
⚠️ 注意事项与最佳实践
- z-index 层级顺序：首列 z-index: 3 应高于表头 z-index: 2（若需冻结表头），但本例中仅需固定首列，故无需额外处理表头粘性；
- 背景色强制声明：background-color: #fff 是必需的，否则滚动时可能透出底层内容；
- 兼容性保障：position: sticky 在现代主流浏览器（Chrome 56+, Firefox 59+, Safari 6.1+, Edge 16+）中完全支持；旧版 Android WebView 需测试，必要时可降级为 JavaScript 方案；
- 性能提示：避免在 .static-column 上使用 box-shadow 或复杂渐变，以防滚动卡顿；
- 无障碍增强：为 .static-column 添加 role="columnheader"（表头）或 role="rowheader"（数据行首列），提升屏幕阅读器体验。
✅ 总结
实现“移动端首列固定 + 横向滚动”的本质，是用最简 CSS 精准控制 sticky 的作用对象：只作用于首列（.static-column），彻底移除对其他列的 sticky 干预。配合 overflow-x: auto 容器与滚动条隐藏，即可获得专业、流畅、符合用户直觉的数据录入体验。该方案轻量、可靠，适用于各类动态表格场景。
