ant-design: Table scroll support overflow auto and min-height

这个坚决同意，希望官方支持，自己硬改样式也可以做到

y 现在可以写 calc(100vh - 80px) 这样哦。

我觉得这个很重要，现在搞得很难受。y 写死一个高度，可能导致页面底部还要大量的空白，也可能导致小屏幕又显示不全。

height可以在bodyStyle设置{height:500},不知道为什么官方文档把他隐藏了，试验过可以生效； 这样在数据少时表格高度也能固定； 在数据为空时建议不要设定高度，bodyStyle=｛data.lenght > 0 ? {height:500} : {}｝， 空时设置默认的暂无数据会挤到底部； 还有就是数据太少，表格高度过大时，最后一行数据的底线是没有的，很丑 这个要加上样式 .ant-table-tbody{ border-bottom:1px solid #e8e8e8; }

&.auto-scroll-y { height: 100%; .ant-spin-nested-loading, .ant-spin-container, .ant-table, .ant-table-scroll, .ant-table-body-inner, .ant-table-fixed-left, .ant-table-content { height: 100%; } .ant-table-content { position: relative; } .ant-table-body, .ant-table-body-inner { overflow-y: auto!important;[如果要同时支持横向滚动，请注释此行(if you enable scroll-x, please disable this)] } .ant-table-header { overflow-y: hidden!important;[如果列有轻微错位请注释掉这行(if table a little garbled, try disable this)] } .ant-table-body { height: calc(100% - 27px[表头高度(table head offset height)]); } .ant-table-body-outer { height: calc(100% - 27px[表头高度(table head offset height)]); } .ant-table-body-inner { overflow-x: hidden; } }

这里临时给大家分享一个 max-height 的解决方法，请给你的 table 添加 className “auto-scroll-y”，props的scroll={{y: true}}。请不要忘记给你的列设置宽度，不然列错位会很严重o(>﹏<)o！！！

最终实现：给你的table父元素设置高度即可限制table的最大高度，实现overflow-y: auto类似的效果。 Effect: Give your table’s parent element a height, it can makes table works as overflow-y: auto.

Translation of this issue:

---

table scroll function enhancement

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• scroll={{y: number}} y can only be a number, can’t use css calc(100vh-120px)
• y can only set max-height of table-body, which is not flexible enough, such as height, min-height

What does the proposed API look like?

height

The table has a fixed height. When the data is small, the paging toolbar position is fixed at the bottom. The Alibaba Cloud console used to be like this.

I saw this https://github.com/ant-design/ant-design/issues/2428 , which was implemented before, and later changed to max-height

Table generally has two usage scenarios, adding and deleting the list page and the data table in the Modal box.

• When the list page is on, the page bar is fixed or follows the table content, each has its own needs, and hopes to support it.

• When displaying a table in Modal, I want the table contents to be fixed at a height for the following reasons.   - When the modal is displayed, the contents of the table are loaded asynchronously, and the modal height is automatically changed. Setting the modal height does not solve this problem perfectly.   - The number of tabular data can be estimated, the number is small, there is no need for paging, no height, it is ugly, when the tabular data changes, the height of the entire modal content is also changing.

minHeight

Functional requirements are similar to height

maxHeight

Equivalent to the current scroll={{y: number}}

bodyStyle

You can completely customize table body style. If you can’t add the attribute height, adding bodyStyle is also possible.