本文详解如何使用 CSS position: sticky 实现表格首列在水平滚动时保持固定，解决常见错位、遮挡、层级异常等问题，并提供可直接运行的响应式代码示例。

本文详解如何使用 css `position: sticky` 实现表格首列在水平滚动时保持固定，解决常见错位、遮挡、层级异常等问题，并提供可直接运行的响应式代码示例。

在构建数据密集型报表或大型横向表格（如财务看板、库存管理、多维度指标对比）时，常需让关键列（如名称、ID、分类标签）在用户水平滚动时始终可见。CSS 的 position: sticky 是实现该效果的理想方案——无需 JavaScript，性能优异，兼容现代主流浏览器（Chrome 56+、Firefox 59+、Safari 13.1+、Edge 79+）。但实践中常因定位上下文、z-index 层级、table-layout 设置不当，导致固定列“被覆盖”“错位偏移”甚至“显示在第二列左侧”，正如问题中描述的视觉异常。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

✅ 正确实现的核心要点

1. 必须为

   设置 table-layout: fixed
   默认 table-layout: auto 会根据内容动态计算列宽，导致 sticky 元素无法稳定锚定；fixed 模式使列宽由 或首行 ）也建议固定顶部
   结合 th:first-child + th 的 top: 0，可实现行列双固定，大幅提升大表格可读性。

   ✅ 完整可运行示例代码

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sticky First Column Table</title>
     <style>
       .my_fixed_table {
         overflow-x: auto; /* 启用水平滚动 */
         cursor: grab;
         margin: 20px 0;
         border: 1px solid #ddd;
         border-radius: 4px;
         box-shadow: 0 1px 3px rgba(0,0,0,0.08);
       }
       .my_fixed_table:active { cursor: grabbing; }
   
       .my_fixed_table table {
         table-layout: fixed; /* 关键：启用固定布局 */
         width: 100%;
         border-collapse: collapse;
         margin: 0;
         user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
       }
   
       /* 固定首列（th 和 td）*/
       .my_fixed_table th:first-child,
       .my_fixed_table td:first-child {
         position: sticky;
         left: 0;
         z-index: 10; /* 必须高于其他列 */
         background-color: #fff;
         border-right: 2px solid #ffcf00;
         padding: 10px 12px;
         font-weight: bold;
         white-space: nowrap;
         text-align: left;
         min-width: 150px;
       }
   
       /* 固定表头 */
       .my_fixed_table thead th {
         position: sticky;
         top: 0;
         z-index: 11; /* 高于首列，确保表头始终在最上层 */
         background-color: #ffcf00;
         color: #333;
         padding: 10px 12px;
         border-bottom: 2px solid #e0b000;
       }
   
       /* 普通单元格样式 */
       .my_fixed_table td {
         padding: 10px 12px;
         border-bottom: 1px solid #efefef;
         text-align: center;
         font-size: 14px;
       }
   
       /* 斑马纹与悬停效果 */
       .my_fixed_table tbody tr:nth-child(odd) td:not(:first-child) {
         background-color: #fdf6e3;
       }
       .my_fixed_table tbody tr:nth-child(even) td:not(:first-child) {
         background-color: #fff;
       }
       .my_fixed_table tbody tr:hover {
         background-color: #f3f3f3 !important;
       }
   
       /* 响应式优化 */
       @media screen and (max-width: 600px) {
         .my_fixed_table table { font-size: 13px; }
         .my_fixed_table th:first-child,
         .my_fixed_table td:first-child {
           min-width: 120px;
           padding: 8px 10px;
         }
       }
     </style>
   </head>
   <body>
   
   <div class="my_fixed_table">
     <table>
       <thead>
         <tr>
           <th style="width: 18%;">Gold Weightage</th>
           <th style="width: 12%;">24 Carat</th>
           <th style="width: 12%;">22 Carat</th>
           <th style="width: 12%;">21 Carat</th>
           <th style="width: 12%;">18 Carat</th>
           <th style="width: 12%;">16 Carat</th>
           <th style="width: 12%;">14 Carat</th>
           <th style="width: 12%;">12 Carat</th>
           <th style="width: 12%;">10 Carat</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td><b>Gold per Tola</b></td>
           <td>Rs. 219,621</td>
           <td>Rs. 201,319</td>
           <td>Rs. 192,168</td>
           <td>Rs. 164,716</td>
           <td>Rs. 146,414</td>
           <td>Rs. 128,112</td>
           <td>Rs. 109,811</td>
           <td>Rs. 91,509</td>
         </tr>
         <tr>
           <td><b>Gold per KG</b></td>
           <td>Rs. 18,829,278</td>
           <td>Rs. 17,260,171</td>
           <td>Rs. 16,475,618</td>
           <td>Rs. 14,121,958</td>
           <td>Rs. 12,552,852</td>
           <td>Rs. 10,983,745</td>
           <td>Rs. 9,414,639</td>
           <td>Rs. 7,845,532</td>
         </tr>
         <tr>
           <td><b>Gold per Gram</b></td>
           <td>Rs. 18,829</td>
           <td>Rs. 17,260</td>
           <td>Rs. 16,476</td>
           <td>Rs. 14,122</td>
           <td>Rs. 12,553</td>
           <td>Rs. 10,984</td>
           <td>Rs. 9,415</td>
           <td>Rs. 7,846</td>
         </tr>
         <tr>
           <td><b>Gold per Ounce</b></td>
           <td>Rs. 498,540</td>
           <td>Rs. 456,995</td>
           <td>Rs. 436,222</td>
           <td>Rs. 373,905</td>
           <td>Rs. 332,360</td>
           <td>Rs. 290,815</td>
           <td>Rs. 249,270</td>
           <td>Rs. 207,725</td>
         </tr>
       </tbody>
     </table>
   </div>
   
   </body>
   </html>

   ⚠️ 注意事项与调试建议

   • 避免嵌套 flex 或 grid 容器：如原始代码中的
     会重置表格的块级渲染上下文，导致 sticky 失效。务必使用纯 block 容器。
   • width 必须显式定义：为
   设置 width（或 min-width），否则 table-layout: fixed 下列宽可能坍缩。
   移动端兼容性：iOS Safari 对 sticky 支持较晚（13.1+），旧版本需降级为 JavaScript 方案（如 IntersectionObserver 监听滚动）。
   性能提示：sticky 列不宜过多（一般仅首列或前两列），避免重排重绘开销；超宽表格建议配合虚拟滚动（virtualized scrolling）进一步优化。
   调试技巧：若固定列仍被遮挡，检查其父元素是否设置了 overflow: hidden 或 transform（会创建新 stacking context），可临时添加 outline: 2px solid red 可视化定位边界。

   通过以上结构化实现，你将获得一个稳定、高性能、跨浏览器兼容的首列固定表格，显著提升复杂数据表格的用户体验与可操作性。

   /	的 width 决定，保障 sticky 定位基准可靠。 固定列需同时设置 left: 0 和足够高的 z-index z-index 仅对定位元素（position 不为 static）生效。首列（th:first-child, td:first-child）必须显式声明 position: sticky，且 z-index 需高于其他单元格（推荐 ≥ 10），避免被后续列遮挡。 包裹容器需启用 overflow-x: auto（非 flex 布局干扰） 原始代码中 会破坏表格自然流式布局，导致 sticky 失效。应改用纯块级容器，并设置 overflow-x: auto 触发滚动上下文。 表头（
   或