在angular应用程序中，如何防止在表格中向下滚动时显示不同宽度的列（变列）？

下面是我正在构建的一个应用程序的模拟

它需要第三方滚动模块。 这是因为我真正的应用程序处理大量数据。所以需要虚拟滚动条。 我尝试了cdk虚拟滚动条，并决定使用ngx虚拟滚动条，因为cdk虚拟滚动条不支持粘性标题

主要代码如下：

// component.html file

<virtual-scroller #scroll [items]="data">
<table>
<thead #header>
<tr>
<th *ngFor="let column of columns"> {{column}}
</th>
</tr>
</thead>

<tbody #container>
<tr *ngFor="let item of scroll.viewPortItems">
<td *ngFor="let column of columns">
<name-comp [name]="item.name" *ngIf="column === 'name'">
</name-comp>

<p>
{{column === 'id' ? item.id :
column === 'postId' ? item.postId :
column === 'email' ? item.email :
column === 'body' ? item.body 
: ''}}
</p>
</td>
</tr>
</tbody>
</table>
</virtual-scroller>

在ngx虚拟滚动头中，粘性头工作正常。 但是，在上下滚动时，这些列仍在不断变化

我怎样才能防止这种情况

一,；我尝试了很多方法，如管道宽度为每列，自定义宽度指令，调整最小宽度和最大宽度。。。。很多有人请帮忙

[请不要担心其他任何事情。我现在唯一的要求/问题是在向下滚动时修复此列的杂耍]

解决方案1： 将此样式放在Table元素上

display: grid;
grid-template-rows: repeat(auto-fit, minmax(2em, 1fr));

把这个样式放在桌面上

display: grid;
grid-template-columns: repeat(auto-fit,minmax(7em, 1fr));

把这个款式穿在tbody tr上

display: grid;
grid-template-columns: repeat(auto-fit,minmax(10em,1fr));

Soution 2

---

使用并删除虚拟滚动条，mat table有一个内置分页器。

计算列的宽度并强制它们不要更改我用自定义指令尝试了这种方法，以观察每个单元格的宽度，并保持最小宽度和最大限制。如果你允许他们有一些地方来调整大小，他们将调整大小。你需要设置精确的宽度，可能设置溢出隐藏在单元格上，因为即使他们设置为精确的大小，他们也可能会导致一些宽度变化。我已经将文本溢出调整为省略号，以便可以为每个单元格保持最大宽度。但结果表明，它工作不正常。我希望有更好的办法。你能出示一些代码吗？我喜欢你的解决方案。它在大型断点中工作得最好。当断点为小/中断点时，您能建议一些方法来防止任何类型的换行吗？在这里，当溢出大于允许值时，我们可以使用水平滚动条？这是修改后的布局：换行也是css函数，请阅读文本换行：

display: grid;
grid-template-columns: repeat(auto-fit,minmax(10em,1fr));