antd表格固定后出现，对不齐的现象，解决方案

问题描述：

antd表格固定后出现对不齐的现象，比如设置了fixed。如下图

这个是官方的bug，在后续版本修复了

 在3.26.1里修复了。

 antd表格固定列对不齐现象https://github.com/ant-design/ant-design/issues/19952

解决方案：

1.升级版本（方案一）

但对于老项目，升级成本高或者暂时无法升级的就只能用样式强行控制了

2.样式控制（方案二）

   (1).github 上antd issues 19952给了一个方案

 这个滚动条会很奇怪 

  antd表格固定列对不齐现象https://github.com/ant-design/ant-design/issues/19952

.ant-table {

//设置表格头部竖向滚动宽度
.ant-table-header::-webkit-scrollbar {
  width: 4px;
}

//设置表格体滚动宽度
.ant-table-body, .ant-table-body-inner {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #909090;
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    background: #EDEDED;
  }
}

//解决固定列底部预留的空隙
.ant-table-fixed-left, .ant-table-fixed-right {
  .ant-table-body-outer {
    margin-bottom: 0 !important;
  }
}
}

（2）下面这个也可以(推荐用这个)

.ant-table-hide-scrollbar::-webkit-scrollbar {
  width: 17px; //或者15px
}

 如果不生效，可以加上以下代码（2025-03-31补充）：

经过评论区的提示，我去看了一下修复此问题的代码提交记录，找到了修复的代码，总共就加了几行。

https://github.com/ant-design/ant-design/commit/d6dab1cb153afc17bf6313c7fe7c046c38333398 

.ant-table-hide-scrollbar .hide-scrollbar {
    min-width: unset;
}

.ant-table-hide-scrollbar::-webkit-scrollbar {
    min-width: inherit;
}

 评论区里也有个方法也可以试试： 

我去看下了rc-table 当初修复这个bug的pr，给了滚动条的宽高transparent，导致自定义滚动条的宽高不成功，还是默认的宽高，需要将ant-table-hide-scrollbar 的 scrollbar-color: transpant 设置 改成 inherit

.ant-table-hide-scrollbar {
      scrollbar-color: inherit;
      margin-bottom: -8px !important;
      &::-webkit-scrollbar {
        height: 8px;
        visibility: hidden;
      }
    }
  }

chatGPT方案：

当使用 Antd 表格组件的固定列功能时，可能会出现单元格对不齐的问题，这是因为固定列后，列宽度发生了变化，导致单元格的宽度也发生了变化，从而出现了对不齐的现象。 解决方法：

1. 设置表格列的宽度 可以通过设置表格列的宽度来避免单元格对不齐的问题。你可以通过以下方式设置列宽度：

const columns = [
  {
    title: '列1',
    dataIndex: 'col1',
    width: 200, // 设置列宽度为 200px
  },
  {
    title: '列2',
    dataIndex: 'col2',
    width: 300, // 设置列宽度为 300px
  },
  // ...
];

注意，如果你设置了列宽度，则需要确保所有列的宽度之和等于表格容器的宽度，否则可能会出现水平滚动条。

 2.设置表格容器的宽度 如果你没有设置列宽度，可以通过设置表格容器的宽度来避免单元格对不齐的问题。你可以在表格组件上添加 scroll={{ x: 'max-content' }} 属性来设置表格容器的宽度： 

<Table columns={columns} dataSource={data} scroll={{ x: 'max-content' }} />

这个属性会根据表格内容的宽度自动调整表格容器的宽度，从而避免单元格对不齐的问题。

3.使用 CSS 样式调整表格 如果以上两种方法仍然无法解决单元格对不齐的问题，你可以使用 CSS 样式来调整表格的布局。你可以使用浏览器的开发者工具来分析表格的布局，并调整相应的 CSS 样式来解决问题。 例如，你可以通过以下 CSS 样式来设置表格列的宽度： 

.ant-table-thead > tr > th:first-child {
  width: 200px;
}
.ant-table-thead > tr > th:last-child {
  width: 300px;
}

总结：

用到第三方插件库，遇到问题百度没找到方案，可以直接去github上其对应的库里issues里找找。或者提问作者。开源社区很强大。