Antd Table设置scroll:y属性后如何自适应父容器高度且响应尺寸变化

解决方案 #

Antd Table 原生的scroll.y: 'auto'仅会让内容区高度随内容自适应，不会主动适配父容器高度，因此可以通过动态计算可用高度+监听容器尺寸变化的方式实现需求，适配不同屏幕尺寸和窗口缩放场景：

实现步骤 #

• 给Table的外层父容器设置占满期望的高度空间，示例CSS如下：

/* 父容器需要先占满你期望的布局高度，比如占满剩余页面空间 */
.table-wrapper {
  height: calc(100vh - 120px); /* 减去页面顶部导航、筛选栏等固定高度，也可以用flex:1等布局实现高度占满 */
  width: 100%;
}

• 组件内声明状态存储动态计算的滚动高度：

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

const MyTable = () => {
  const [scrollY, setScrollY] = useState(0);
  // 其他业务逻辑：columns、dataSource、pagination等定义

• 挂载后监听父容器尺寸变化，动态计算内容区可用高度：

useEffect(() => {
    const tableWrapper = document.querySelector('.table-wrapper');
    if (!tableWrapper) return;

    const computeScrollY = () => {
      // 按需扣除固定高度：表头高度、分页高度、边距、表格边框等
      const fixedHeight = 56 /* 表头默认高度 */ + 52 /* 分页栏高度，无分页可删除 */ + 16 /* 上下边距按需调整 */;
      const availableHeight = tableWrapper.clientHeight - fixedHeight;
      setScrollY(availableHeight > 0 ? availableHeight : 0);
    };

    // 初始化计算
    computeScrollY();
    // 监听容器尺寸变化，自动更新高度
    const resizeObserver = new ResizeObserver(computeScrollY);
    resizeObserver.observe(tableWrapper);

    // 销毁时解绑监听
    return () => {
      resizeObserver.disconnect();
    };
  }, []);

• 将计算得到的高度传给Table的scroll属性：

return (
    <div className="table-wrapper">
      <Table
        columns={columns}
        dataSource={dataSource}
        scroll={{ y: scrollY }}
        pagination={pagination}
      />
    </div>
  );
};

注意事项 #

• 如果使用flex布局实现父容器高度自适应，需要确保父级元素的高度链是完整的，避免父容器高度为0的问题
• 扣除的固定高度可以根据实际业务的表头自定义样式、分页配置、边距设置做调整
• 若需要兼容低版本浏览器不支持ResizeObserver，可以替换为监听window.resize事件，同时在布局切换的回调中手动触发高度计算

内容的提问来源于stack exchange，提问作者TheLazyDogsBack