Ant Design表格表头固定：如何解决滚动时表头消失的问题？

Ant Design的Table组件提供了表头固定的能力，但是很多开发者在配置后会出现滚动时表头消失的情况，这通常是属性配置或者容器高度设置不符合要求导致的。

表头固定的实现原理

Ant Design Table组件的表头固定功能，本质是通过设置scroll属性，让表格内容区域在指定高度内滚动，而表头部分保持定位不随内容滚动。要实现这个功能，需要正确配置scroll属性中的y值，同时保证表格容器有明确的高度限制。

表头消失的常见原因

• 没有设置scroll.y属性，或者scroll.y的值不是有效的像素值或百分比
• 表格的外部容器没有设置固定高度，导致表格无法计算出可滚动区域的高度
• 表格被嵌套在动态高度的容器中，容器高度变化后没有触发表格重新计算布局
• 同时存在scroll.x和scroll.y配置时，x方向的滚动设置影响了y方向的表头定位

解决方案及代码示例

基础固定表头配置

首先确保正确设置scroll属性的y值，这个值表示表格内容区域的可滚动高度，表头会固定在这个区域的上方。

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

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 150,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    width: 100,
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [];
// 生成20条测试数据
for (let i = 0; i < 20; i++) {
  data.push({
    key: i,
    name: `用户${i}`,
    age: 20 + i,
    address: `北京市朝阳区某某路${i}号`,
  });
}

const FixedHeaderTable = () => {
  return (
    <Table
      columns={columns}
      dataSource={data}
      // 设置内容区域最大高度为300px，超出则滚动
      scroll={{ y: 300 }}
      pagination={false}
    />
  );
};

export default FixedHeaderTable;

容器高度动态变化的适配方案

如果表格容器的高度是动态变化的，比如占满剩余屏幕高度，需要在容器高度变化后让表格重新计算布局，可以通过给表格设置key属性，当高度变化时更新key触发重新渲染。

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

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 150,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    width: 100,
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [];
for (let i = 0; i < 20; i++) {
  data.push({
    key: i,
    name: `用户${i}`,
    age: 20 + i,
    address: `北京市朝阳区某某路${i}号`,
  });
}

const DynamicHeightTable = () => {
  const [tableHeight, setTableHeight] = useState(300);
  const [tableKey, setTableKey] = useState(1);

  // 模拟容器高度变化，比如窗口 resize 或者侧边栏展开收起
  useEffect(() => {
    const handleResize = () => {
      // 假设容器高度是窗口高度减去200px的头部高度
      const newHeight = window.innerHeight - 200;
      setTableHeight(newHeight);
      // 更新key触发表格重新渲染，重新计算布局
      setTableKey(prev => prev + 1);
    };

    window.addEventListener('resize', handleResize);
    // 初始化时计算一次高度
    handleResize();

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

  return (
    <div style={{ height: `${tableHeight}px`, overflow: 'hidden' }}>
      <Table
        key={tableKey}
        columns={columns}
        dataSource={data}
        scroll={{ y: tableHeight - 50 }} // 减去表头大概的高度，避免内容溢出
        pagination={false}
      />
    </div>
  );
};

export default DynamicHeightTable;

同时设置横向和纵向滚动的注意事项

如果需要同时固定表头和横向滚动，要确保scroll.x的值是所有列宽度之和，或者设置为一个大于所有列宽总和的值，避免横向滚动时表头和内容对不齐。

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

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 150,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    width: 100,
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    width: 300,
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
    width: 200,
  },
];

const data = [];
for (let i = 0; i < 20; i++) {
  data.push({
    key: i,
    name: `用户${i}`,
    age: 20 + i,
    address: `北京市朝阳区某某路${i}号`,
    phone: `1380013800${i}`,
  });
}

const BothScrollTable = () => {
  return (
    <Table
      columns={columns}
      dataSource={data}
      // x设置为所有列宽总和，y设置内容区域高度
      scroll={{ x: 750, y: 300 }}
      pagination={false}
    />
  );
};

export default BothScrollTable;

常见问题排查

如果按照上述配置后仍然出现表头消失的问题，可以按照以下步骤排查：

1. 检查scroll.y是否设置了有效值，不能是百分比或者无效单位
2. 打开浏览器开发者工具，查看表格的ant-table-container类对应的元素是否有正确的高度样式
3. 确认表格没有被设置display: none，隐藏状态下表格无法计算布局
4. 如果使用了自定义的主题或者样式覆盖，检查是否有样式影响了表头的定位属性

Ant_DesignTable表头固定scroll属性修改时间：2026-07-18 21:12:12