本文详解如何在移动设备（屏幕宽度 ≤768px）上实现表格首列（如“Produto”）始终固定可见，其余列支持水平滚动，同时保持表头对齐与交互可用性。核心依赖 position: sticky 与精准的媒体查询控制。
本文详解如何在移动设备（屏幕宽度 ≤768px）上实现表格首列（如“produto”）始终固定可见，其余列支持水平滚动，同时保持表头对齐与交互可用性。核心依赖 `position: sticky` 与精准的媒体查询控制。
在构建数据密集型表单（如价格调研系统）时，常需在小屏设备上展示多列输入项，但又不能牺牲关键标识列（如产品名称）的可见性。理想的体验是：首列“钉住”不动，用户左右滑动查看/填写其余列，且所有单元格仍可正常聚焦、输入与格式化。本文提供一套经过验证的纯 CSS + HTML 实现方案，无需 JavaScript 操作 DOM，兼容现代移动端浏览器（Chrome、Safari、Firefox for iOS/Android）。
✅ 正确实现要点
关键在于精准控制 sticky 的作用范围。原始代码中存在一个常见误区：对非首列的 <th> 错误地应用了 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><input type="text" class="price" onkeyup="formatCurrency(this)"></td>
<td><input type="text" class="price" onkeyup="formatCurrency(this)"></td>
<td><input type="text" class="price" onkeyup="formatCurrency(this)"></td>
<td><input type="text" class="price" onkeyup="formatCurrency(this)"></td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</div>⚠️ 注意事项与最佳实践
- z-index 层级必须合理：首列 z-index: 10 应高于其他内容（默认为 auto 或 0），避免被遮挡；
- 背景色不可省略：background-color: white 是防止滚动时文字“透底”的必要样式；
- 移动端视口声明必需：确保 <head> 中包含 <meta name="viewport" content="width=device-width, initial-scale=1">；
- 输入框兼容性：inputmode="decimal" 提升软键盘体验，配合 onkeyup="formatCurrency(this)" 可做实时货币格式化（需自行实现该 JS 函数）；
- 无障碍考量：固定列仍需保持语义结构（如 <th> 用于表头），屏幕阅读器可正常识别；
- 性能提示：sticky 在复杂嵌套中可能影响渲染性能，建议将 .table-container 作为直接父容器，避免多层相对定位干扰。
通过以上配置，你将获得一个在桌面端正常流式布局、在手机端自动启用“冻结首列+横向滚动”的专业级表格组件——既满足数据录入效率，又保障用户体验一致性。
