求助：antd-pro ProLayout中PageContainer移动端内容溢出问题

问题分析 #

当前使用Antd Pro的ProLayout结合PageContainer包裹页面，大屏显示正常，但移动端页面内容溢出容器。核心问题出在自定义ReactTable组件的样式适配上：

• 表格未设置横向滚动容器，小屏幕下单元格的whiteSpace: nowrap属性会让内容撑破容器
• 分页区域的固定间距、按钮固定宽度在移动端超出屏幕范围
• 无数据状态的绝对定位可能导致布局偏移

修复方案 #

1. 给表格添加横向滚动容器 #

在表格外层包裹带横向滚动的容器，确保小屏幕下表格可横向滚动，避免撑破父容器：

return (
    <>
        {/* 添加外层滚动容器 */}
        <div style={{ overflowX: 'auto', width: '100%' }}>
            <table {...getTableProps()} className={css(StyleSheet.table)}>
                {/* 原表格内容保持不变 */}
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {headerGroup.headers.map(column => (
                                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {/* 原tbody内容保持不变 */}
                </tbody>
            </table>
        </div>
        {/* 分页部分保持不变 */}
    </>
)

2. 优化分页区域的移动端响应式样式 #

修改StyleSheet中的分页相关样式，替换固定值为自适应布局：

const StyleSheet: any = {
    // ... 其他原有样式不变
    pagination: {
        border: '1px solid rgba(0,0,0,0.1)',
        display: 'flex',
        padding: '5px',
        // 移动端自动换行，垂直排列
        flexWrap: 'wrap',
        gap: '10px',
        alignItems: 'center',
        justifyContent: 'center'
    },
    pageChange: {
        margin: 'auto',
        display: 'flex',
        // 移动端缩小间距，支持换行
        gap: '20px',
        flexWrap: 'wrap',
        justifyContent: 'center'
    },
    btn: {
        '& .ant-btn': {
            // 替换固定宽度为自适应最大宽度
            maxWidth: '120px',
            width: '100%',
            color: 'rgba(0,0,0,0.6)',   
            background: 'rgba(0,0,0,0.1)',
            borderColor: 'transparent !important',
            ':hover': {
                background: 'rgba(0,0,0,0.3)',
                color: '#fff'
            },
        },
        '& .ant-btn[disabled]': {
            maxWidth: '120px',
            width: '100%',
            color: 'rgba(0,0,0,0.6)',
            background: 'rgba(0,0,0,0.1)',
            borderColor: 'transparent !important',
            opacity: 0.5
        }
    },
    // ... 其他原有样式不变
}

3. 修复无数据状态的布局问题 #

修改无数据文本的定位方式，避免绝对定位导致的布局混乱：

noData: {
    height: '100px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    '& .no-data-text': {
        color: '#00000080',
        margin: 0,
        width: '100%',
        textAlign: 'center'
    }
}

额外优化建议 #

• 可添加媒体查询，针对不同屏幕宽度进一步调整字体大小、间距等细节
• 若表格列数较多，可在移动端隐藏非核心列，或提供列切换功能提升体验

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