antd 中用于展示可滚动内容的组件
在开发中，当内容较多时，页面会隐藏下方的部分。为了解决这个问题，ant design (antd) 提供了多种组件，可以进行包容所有的内容，并在内容溢出时实现滚动。
card 与 table 的结合
在 antd 中，可以将 card 组件与 table 组件结合使用，实现内容溢出时的滚动效果。card 组件用于包裹 table 组件，并设置 height 和 overflow 属性，使其在内容溢出时能够滚动。例如：
import react from 'react';
import { card, table } from 'antd';
const columns = [
// 表格列的配置
];
const data = [
// 表格数据的配置
];
const scrollabletable = () => {
return (
);
};
export default scrollabletable;样式调整
可以根据需要进一步调整样式，以适应具体的需求。上述代码示例设置了表格的高度为300px，可以根据实际情况进行调整。通过使用 card 组件包裹 table 组件，并设置适当的样式，可以实现内容溢出时的滚动效果。
使用 flex 布局自适应高度
要让 card 组件根据其父容器的高度进行自适应，而不是固定高度，可以使用 css 的 flex 布局来实现。您可以将 height: '400px' 替换为 height: '100%'，并在 css 中设置 flex 布局属性：
import react from 'react';
import { card, table } from 'antd';
import './scrollabletable.css'; // 引入自定义的css
const columns = [
// 表格列的配置
];
const data = [
// 表格数据的配置
];
const scrollabletable = () => {
return (
);
};
export default scrollabletable;scrollabletable.css
/* ScrollableTable.css */
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.card {
height: 100%;
display: flex;
flex-direction: column;
}
.card .ant-table-wrapper {
flex: 1;
}通过以上修改，card 组件将根据父容器的高度自适应，并且表格内容可以滚动显示。这样就可以避免使用固定高度，并确保布局在不同屏幕尺寸下的自适应性。
