react的antd的table组件横向滚动条始终位于可视区域

要实现antd的table组件横向滚动条始终位于可视区域，可以使用CSS的sticky属性和JavaScript的scroll事件结合实现。

首先，在table组件的外层div上设置position: relative属性，使得其内部的横向滚动条可以相对于该div定位。

然后，在表头的tr标签上添加一个空的th标签，并设置其宽度与table的最后一列宽度相等，这样可以强制表头占据整个table宽度，使得横向滚动条的位置能够正确计算。

接着，在表格的tbody标签上添加一个监听scroll事件的函数，将table的横向滚动条的left属性设置为-1倍当前的scrollLeft，这样就可以实现横向滚动条始终位于可视区域。

最后，使用CSS的sticky属性将表头固定在页面顶部，使得用户在滚动页面时可以方便地查看表格数据。

以下是示例代码：

CSS：

.table-container {
  position: relative;
  height: 300px; // 设置table容器的高度
  overflow-x: auto; // 横向滚动条出现时自动出现
}

.ant-table-thead > tr > th:last-child {
  width: 100%; // 强制占满整个table宽度
}

.ant-table-thead > tr > th {
  position: sticky;
  top: 0;
  background-color: #fff;
}

JavaScript：

const tbody = document.querySelector('.ant-table-tbody');
tbody.addEventListener('scroll', () => {
  const table = document.querySelector('.ant-table');
  const scrollLeft = tbody.scrollLeft;
  table.style.left = `-${scrollLeft}px`;
});