antd 固定表格高度

要固定 Ant Design 表格的高度，您可以使用 `scroll` 属性。将 `scroll` 属性设置为一个对象，其中包含 `x` 和 `y` 属性，分别表示水平和垂直方向的滚动。要固定表格的高度，可以将 `y` 属性设置为所需的高度，例如：

<Table
  columns={columns}
  dataSource={data}
  scroll={{ y: 400 }}
/>

这将使表格在垂直方向上滚动，并将其高度固定为 400 像素。您可以根据需要进行调整。请注意，当表格中的行数超过指定高度时，它们将自动滚动。

相关问题

antd 表格固定高度

你可以通过设置Table组件的scroll属性来实现表格固定高度。例如：

import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

<Table
  dataSource={dataSource}
  columns={columns}
  scroll={{ y: 240 }}
/>

在上面的例子中，设置了scroll属性的y值为240，表示表格的高度为240px。你可以根据实际情况调整该值。

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

要使 antd 的表格滚动条固定在底部，可以设置 `scroll={{ y: 'calc(100vh - 300px)' }}`，其中 `100vh` 是视口高度，`300px` 是表格头和底部分页器的高度之和。

具体实现如下：

import React from 'react';
import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
  // ...
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  // ...
];

const App = () => {
  return (
    <div style={{ height: '100vh' }}>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={false}
        scroll={{ y: 'calc(100vh - 300px)' }}
      />
    </div>
  );
};

export default App;

上面的代码将会使表格的纵向滚动条固定在距离视口底部 `300px` 的位置。你可以根据实际需求来调整这个值。