React-Table首列固定技术咨询：横向滚动时如何让首列始终可见？

嘿，我之前也碰到过一模一样的需求！其实完全不用去改react-table的源码，咱们用CSS配合react-table的列配置就能轻松搞定横向滚动时第一列固定的效果，下面是我亲测有效的实现步骤：

• 第一步：给表格容器设置横向滚动
  先给包裹react-table的外层容器加上横向滚动的样式，这样当列太多时会自动出现滚动条：

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

  然后把你的react-table组件放在这个容器里就行。

• 第二步：给第一列添加冻结标识
  在定义表格列的时候，给第一列的className和headerClassName都加上一个自定义类名（比如sticky-first-column），这样我们就能精准定位到第一列的表头和数据单元格：

  const columns = [
    {
      Header: '用户ID',
      accessor: 'userId',
      className: 'sticky-first-column',
      headerClassName: 'sticky-first-column'
    },
    // 下面是其他需要横向滚动的列...
    { Header: '用户名', accessor: 'username' },
    { Header: '注册时间', accessor: 'registerTime' },
    // 更多列...
  ];
  

• 第三步：编写冻结的核心CSS样式
  针对刚才的自定义类，添加position: sticky和left: 0属性，同时设置背景色避免滚动时后面的内容透过来：

  .sticky-first-column {
    position: sticky;
    left: 0;
    /* 背景色要和表格的背景保持一致，这里用白色举例 */
    background-color: #ffffff;
    /* 提高层级，确保第一列在其他列上方 */
    z-index: 1;
    /* 可以加个右边框，清晰区分冻结列和滚动列 */
    border-right: 1px solid #e5e7eb;
  }
  

一些额外注意事项 #

• 如果你的表格用了深色主题，记得把background-color改成对应的深色值，不然滚动时会出现突兀的色块；
• 如果表格有分组表头或者嵌套列，可能需要调整z-index的值，确保冻结列的层级正确；
• position: sticky在现代浏览器都支持，但IE11及以下不兼容，如果需要兼容旧浏览器，可能要考虑用JS监听滚动事件来模拟，但大部分场景下现代浏览器支持就足够了。

这样设置之后，当你横向滚动表格时，第一列就会固定在左侧，始终保持可见啦！

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