Antd 表格内容溢出时如何实现滚动显示？

Antd Table 在单元格内容超出列宽时，默认行为是自动换行，行高被撑大。对于日志、长文本、URL、JSON 片段这类内容，换行不仅破坏表格对齐，还会让横向内容区难以浏览。解决办法是让表格容器出现横向滚动条，并让单元格根据场景选择省略号或固定列。下面围绕 scroll、width、ellipsis、fixed 几个配置逐步展开。

一、先让表格产生横向滚动：scroll.x 与列宽

Table 的 scroll 属性用来控制滚动区域，x 表示横向滚动。只写 scroll={{ x: 800 }} 时，Antd 会给表格外层容器设置 overflow-x 为 auto，当内容总宽度超过 800px 时出现横向滚动条。但如果列没有设置宽度，Antd 会尽量按比例分配列宽，可能出现某些列仍被压缩换行。所以需要给重点列设置 width，或者直接使用 x: 'max-content' 让表格按内容所需宽度展开。注意 max-content 是字符串值，不能写成变量。

下面是一个基础配置示例：

import { Table } from 'antd';

const columns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '日志内容', dataIndex: 'log', width: 320 },
  { title: '请求地址', dataIndex: 'url', width: 260 },
  { title: '时间', dataIndex: 'time', width: 180 },
];

const data = [
  {
    id: 1,
    log: '这是一段非常长的日志文本，默认情况下会撑开行高',
    url: 'https://api.ipipp.com/v1/orders?page=1&size=20',
    time: '2025-01-01 10:00:00',
  },
];

<Table
  columns={columns}
  dataSource={data}
  scroll={{ x: 900 }}
  pagination={false}
/>

如果不想手动计算总宽度，也可以写成 scroll 的 x 为 max-content。这种方式会让表格宽度根据所有列的实际内容自动扩展，适合列内容长度不固定的场景。但要注意，某些浏览器对 max-content 在固定列配合时表现略有差异，最稳妥的做法还是显式指定每一列的宽度，并让总宽度略大于容器宽度。

二、单元格溢出显示省略号：ellipsis 与自定义 render

单纯横向滚动解决了表格整体浏览，但用户可能希望在不滚动的情况下快速看到截断提示。Antd 列配置中的 ellipsis 属性可以自动实现文本溢出省略号，并在悬浮时通过 Tooltip 展示完整内容。配置 ellipsis: true 后，列内的字符串内容会被截断为单行，默认用省略号表示。如果内容包含自定义 render，ellipsis 也支持对象形式设置 showTitle，但通常直接 true 即可。

const columns = [
  {
    title: '日志内容',
    dataIndex: 'log',
    width: 320,
    ellipsis: true,
  },
  {
    title: '请求地址',
    dataIndex: 'url',
    width: 260,
    ellipsis: true,
    render: (text) => (
      <a onClick={() => console.log(text)}>{text}</a>
    ),
  },
];

ellipsis 默认会使用 Tooltip 展示完整内容，但如果 render 返回了链接、按钮等复杂节点，悬浮提示可能无法正确显示，此时可以设置 ellipsis 的值为对象并关闭默认提示，然后自己用 Tooltip 包裹。也可以使用 CSS 方案：给单元格加 className，配合 white-space、overflow、text-overflow 三个属性，但要保证 td 宽度固定。Antd 的 ellipsis 内部原理与此类似，只是在 Tooltip 交互上做了封装。

三、横向滚动时固定关键列

当横向内容很长，用户滚动到右侧后，可能看不到行标识、操作按钮等关键信息。Antd 支持列固定，通过 fixed 属性实现，值为 left 或 right。固定列必须设置 width，否则可能宽度计算错误。此外，如果同时使用 ellipsis 和 fixed，要注意 Tooltip 在固定列中可能被遮挡或定位偏移，通常 Antd 会处理好，但若遇到异常可以尝试提高列 z-index 或减少阴影。

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
    fixed: 'left',
  },
  {
    title: '日志内容',
    dataIndex: 'log',
    width: 320,
    ellipsis: true,
  },
  {
    title: '请求地址',
    dataIndex: 'url',
    width: 280,
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    fixed: 'right',
    render: () => <a>编辑</a>,
  },
];

固定列带来的视觉问题是左右阴影，Antd 会自动加上 box-shadow，但在某些主题或自定义样式下可能需要调整。还有，固定列在低版本浏览器中因为 position sticky 的兼容性会失效，需要检查浏览器支持。移动端横向滚动体验一般，建议优先考虑横向滚动加省略号，而不是过多固定列。

四、纵向滚动与表头固定

除了横向溢出，数据行过多时也需要纵向滚动。scroll.y 指定纵向滚动区域高度，表头会自动固定在顶部。可以同时设置 x 和 y，例如 scroll={{ x: 900, y: 400 }}。此时表格主体高度固定，数据超过高度后出现纵向滚动条。但注意 y 不能随便写，如果表格内容不足 400px，也会出现空白区域。通常用在数据量大且需要固定表头的后台表格中。

<Table
  columns={columns}
  dataSource={data}
  scroll={{ x: 900, y: 400 }}
  pagination={{ pageSize: 50 }}
/>

纵向滚动和分页可以同时使用，但要注意分页器在表格底部，如果 y 高度控制不当，可能出现双重滚动条。建议给表格外层容器设置固定高度，或者只使用分页、不设置 y。Antd 5 对虚拟滚动也提供了支持，当数据量达到几千行时可以用 virtual 属性提升性能，但虚拟滚动要求行高固定，配置会更复杂。对于常规溢出场景，scroll.x 加 ellipsis 足够。

Antd 表格内容溢出滚动显示修改时间：2026-09-23 20:30:43