如何使表格列在Angular 2中冻结的多列可滚动？

Posted 2023-03-05

【中文标题】如何使表格列在Angular 2中冻结的多列可滚动？

【英文标题】：How to make table column scrollable with multiple columns frozen in Angular 2?

【发布时间】：2017-10-16 12:42:23

【问题描述】：

我有一个表，其中包含 3 列，需要始终保持在左侧，列包含网格，每个网格元素代表一天中的一小时，所以我需要该列是可滚动的。我尝试了许多建议的解决方案，但其中大多数都使用绝对位置，这是一个糟糕的笑话，因为当我使用它时，我失去了桌子的优势，例如行的高度变化，那些绝对定位不跟随。另一个问题是 table 由几个 Angular 2 组件组成，它不仅仅是普通的 html，这使得它更难。有没有比使用绝对位置更好的解决方案？

【问题讨论】：

我们可以看一些您尝试过的代码示例吗？

【参考方案1】：

我采用了这种方法。我不适用于垂直和水平方向。

https://plnkr.co/edit/MWFJuiWsUoo39xbCwAKI?p=preview

onScrollA($evt) 
   this.divC.nativeElement.scrollLeft = evt.srcElement.scrollLeft;

【参考方案2】：

也许可以试试position: sticky; 但是没有代码，很难看出问题出在哪里。

【参考方案3】：

好吧，最后我还是选择了这个解决方案： Fix and Scrollable table structure using html div

它仍然使用绝对列以及固定的宽度和边距，但只要它有效，我就可以忍受。关于表示表格行的Angular组件元素，我只是给它display: table-row，并简单地将td标签放在里面，所以不再需要使用tr。