在前端开发中，使用 Antd 实现一个可滚动且高度自适应的表格是常见需求。这不仅能提升用户体验，还能有效展示大量数据。下面将介绍具体的实现方法。

要理解 Antd 表格组件的基本结构和属性。Antd 的 Table 组件提供了丰富的功能和属性来满足各种需求。对于可滚动和高度自适应的实现，关键在于正确设置表格的高度以及滚动相关的属性。

设置表格高度是实现高度自适应的重要一步。可以通过 CSS 来控制表格的高度。例如，将表格父元素的高度设置为一个固定值或者相对值，然后让表格组件自适应这个高度。可以在 CSS 文件中定义如下样式：

.table-container {
  height: 400px; /* 设置一个固定高度，也可以根据需求调整为相对值，如百分比 */
  overflow-y: auto; /* 启用垂直滚动条 */
}

在 React 组件中，将表格组件包裹在具有上述样式的容器中：

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

const dataSource = [
  // 表格数据
];

const columns = [
  // 表格列定义
];

const App = () => {
  return (
    <div className="table-container">
      <Table dataSource={dataSource} columns={columns} />
    </div>
  );
};

export default App;

除了设置固定高度，还可以让表格高度根据浏览器窗口大小自适应。这可以通过使用 JavaScript 获取窗口高度，并动态设置表格高度来实现。例如：

import React, { useEffect, useState } from'react';
import { Table } from 'antd';

const dataSource = [
  // 表格数据
];

const columns = [
  // 表格列定义
];

const App = () => {
  const [tableHeight, setTableHeight] = useState(0);

  useEffect(() => {
    const handleResize = () => {
      const height = window.innerHeight - 100; // 减去一定的边距
      setTableHeight(height);
    };

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div style={{ height: tableHeight, overflowY: 'auto' }}>
      <Table dataSource={dataSource} columns={columns} />
    </div>
  );
};

export default App;

通过上述方法，无论是设置固定高度还是让表格高度随窗口自适应，都能轻松实现 Antd 可滚动且高度自适应的表格，满足不同场景下的数据展示需求。