How to solve virtual scroll and automatic column width in NgZorro's <nz-table>?

The issue I have is that I cannot get column width, horizontal scrolling and vertical scrolling to go well together. Maybe it's a limitation of the component library, or maybe I just can't wrap my head around configuring the table correctly.

I want to achieve a table where column width is automatic based on the data and the table bounds are within the viewport. If necessary, the table should scroll vertically and/or horizontally, but the user shouldn't have to scroll other elements of the app out of view when navigating the table.

It seems like this configuration (any fixed value for y should do) together with not setting a fixed [nzWidth] for columns makes it go boohoo:

<nz-table>

[...]

[nzScroll]="{ x: 'auto', y: '240px' }"
</nz-table>


This is what it looks like

This stackblitz, which is an example from the nz-table documentation page that I've modified slightly, shows the same issue I'm having in our code base.

Continue reading...