Ant Design 表格的纵向和横向滚动

Question

我正在使用Ant Design Table来展示公司内部API的动态数据。

这意味着我不知道我将收到什么样的数据来填充每个单元格。它可以是大段文本、数字、空值、短字符串、图像、URL等任何内容。

我需要应用水平和垂直滚动，但正如Ant Design文档所述：

如果标题和单元格不正确对齐，请指定列的宽度。（至少保留一个没有宽度以适应流体布局的列）建议为scroll.x设置大于表格宽度的固定值。未固定列的总和不应大于scroll.x。

现在，宽度很好，Ant Design Table可以找出每个列的最佳比例。请参见下面的图片：

问题在于当我设置y轴滚动时。以下是一个示例：

这里的主要问题是我不知道每一列的数据大小。 说到列，我必须从表格源中提取键以动态生成列。

有办法避开这种行为吗？

谢谢！

- Italo Borges

---

这个案例已经完成了吗？ - Onesinus Saut

@OnesinusSaut 不。 - Italo Borges

@spiny_beast 我做了一个解决方法来修复这个问题。这不是最优雅的解决方案，但我让每一列根据字符数计算宽度。我还为每一列宽度设置了一个最大值。它起作用了。只要注意表格中的数据量，它可能会影响性能。你也可以设置分页来帮助提高性能 =) - Italo Borges

Answer 1

这是一个Ant Design已知的问题，可以在此处、此处、此处和此处查看。

目前没有适当的解决方案。我遇到了同样的问题，试图为每一列设置宽度，但对于固定表头则无法使用。另一种简单的解决方法是使用水平滚动条并移除垂直滚动条，例如：

scroll={{ x: 400 }}

- Afaq Ahmed Khan

---

谢谢！我和你做的一样，为每列设置了宽度，但我是动态设置的，而且它起作用了。现在你可以设置XScroll、YScroll和固定列了。我把它发布为答案了。 - Italo Borges

Answer 2

请参考@Afaq提出的问题附带的这个评论。

如果有人遇到此问题，请为每列设置宽度，并在表格中添加以下代码：scroll={{ x: "max-content" }}，这将自动调整列宽。这样大多数人就能解决这个问题。

这应该可以解决大多数人的问题。

- Karan Sharma

---

谢谢卡兰！只需在表格上使用max-content就可以解决我的问题，我不需要单独设置每一列的宽度。 - Oussama Bouchareb

Answer 3

我为我的问题想出了一个解决方法。为了根据列的宽度设置整个表格的宽度，我必须遍历所有表格数据，根据它们自身内容的长度计算每个单元格的宽度。

之后，我可以总结总宽度并将其设置为表格宽度。

这里是使用此方法的示例：

- Italo Borges