antd table 表格横向滚动条固定在底部

要实现表格横向滚动条固定在底部，可以使用以下步骤：

1. 设置表格容器的高度，以便在表格内容过多时会出现纵向滚动条。

2. 设置表格的 scroll 属性，包括 x 和 y 两个参数，其中 x 用于控制横向滚动条的出现，y 用于控制纵向滚动条的出现。

3. 设置表格底部的固定行，使用 Table 组件的 footer 属性，将 footer 设为一个函数，返回一个固定行的 JSX 元素。

4. 在固定行的 JSX 元素中，设置一个空白的占位符元素，高度与表格容器的高度相同，以便在表格内容不足时，固定行也能占据整个表格底部。同时，设置一个空白的 div 元素，宽度与横向滚动条的宽度相同，以便在表格内容过多时，横向滚动条能够正常出现。

下面是一个示例代码：

import { Table } from 'antd';

const dataSource = [
  // 数据源
];

const columns = [
  // 表头列配置
];

const fixedRowHeight = 50; // 固定行的高度
const scrollHeight = 400; // 表格容器的高度
const scrollWidth = 1200; // 表格内容的宽度，需要根据实际情况进行调整

function renderFooter() {
  return (
    <tr>
      <td colSpan={columns.length}>
        <div style={{ height: `${scrollHeight - fixedRowHeight}px` }} />
        <div style={{ width: `${scrollWidth}px`, height: `${fixedRowHeight}px` }} />
      </td>
    </tr>
  );
}

function App() {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      scroll={{ x: scrollWidth, y: scrollHeight }}
      footer={renderFooter}
    />
  );
}

在上面的代码中，我们先设置了固定行的高度和表格容器的高度，然后在 renderFooter 函数中，返回一个包含空白占位符和横向滚动条占位元素的 JSX 元素。最后，在 Table 组件中，将 scroll 属性设置为包含横向滚动条宽度和表格容器高度的对象，将 footer 属性设置为 renderFooter 函数即可。