TanStack Table 首列粘性失效问题（基于Radix UI）

问题背景 #

用Radix UI搭配TanStack Table时，遇到首列粘性定位失效的情况：固定宽度表格时功能正常，一开列可调整大小就出问题。试过给滚动容器加100vw样式，没用。

修复步骤 #

1. 补全粘性列的核心样式
   首列的表头和单元格必须加全粘性相关样式，尤其注意z-index和背景色，不然会被后面的列覆盖或者透过去：

   .table-sticky-first-col th:first-child,
   .table-sticky-first-col td:first-child {
     position: sticky;
     left: 0;
     z-index: 10;
     background: #fff;
   }
   

2. 调整容器的宽度与滚动设置
   别用100vw，换成width: 100%和max-width: 100%，避免视口变化时的宽度冲突，同时保证容器能正确滚动：

   .table-container {
     overflow-x: auto;
     width: 100%;
     max-width: 100%;
   }
   

3. 修正列配置里的粘性属性
   在列定义里明确把sticky设为left，确保调整大小功能不会冲掉粘性逻辑：

   const columns = [
     {
       accessorKey: 'id',
       header: 'ID',
       sticky: 'left',
       size: 100,
       enableResizing: true,
     },
     // 其他列配置...
   ];
   

4. 调整表格的布局模式
   把表格的table-layout从fixed改成auto，避免列调整大小后宽度计算异常：

   .table-sticky-first-col {
     table-layout: auto;
     width: 100%;
   }
   

排查注意点 #

• 滚动表格时看首列是否固定，有没有被其他元素遮挡
• 检查容器或父元素有没有overflow: hidden或者position: relative干扰粘性定位
• 确认粘性列的背景色不透明，不然滚动时会看到后面的内容透过来

内容的提问来源于stack exchange，提问作者CleverlyDone