antd table sticky 固定滚动条

Antd Table 组件可以实现固定表头和固定列，但是在滚动时并不能固定滚动条。不过我们可以通过 CSS 样式来实现这个功能。

具体实现方法如下：

1. 给表格容器（Table）设置高度和 overflow 属性，使得表格内容超出容器高度时出现滚动条。

.table-container {
  height: 500px;
  overflow: auto;
}

2. 给表格容器的滚动条（::-webkit-scrollbar）设置样式，使其固定在表格容器的右侧。

.table-container::-webkit-scrollbar {
  width: 10px;
  height: 100%;
}

3. 给滚动条的滑块（::-webkit-scrollbar-thumb）设置样式，使其颜色和样式与表格容器的表头和固定列一致。

.table-container::-webkit-scrollbar-thumb {
  background-color: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
}

完整示例代码如下：

import React from 'react';
import { Table } from 'antd';
import './styles.css';

const data = [...];

const columns = [...];

const App = () => {
  return (
    <div className="table-container">
      <Table
        dataSource={data}
        columns={columns}
        scroll={{ x: 'max-content' }}
        pagination={false}
      />
    </div>
  );
};

export default App;

.table-container {
  height: 500px;
  overflow: auto;
}

.table-container::-webkit-scrollbar {
  width: 10px;
  height: 100%;
}

.table-container::-webkit-scrollbar-thumb {
  background-color: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
}