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

I have a table that contains 3 columns that need always stay at the left side and column that contains grid where each grid element represents one hour in day, so I need that column to be scrollable. I tried many suggested solutions, but most of them are using position absolute, which is a bad joke, since when I use it I lose advantage of table, e.g. height of row changes, those absolute positioned don't follow. And the other problem is that table consists of few Angular 2 components, it's not just plain html, which makes it harder. Is there any better solution than using position absolute?

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

3 个解决方案

#1

I made this approach. I't will work for vertical and horizontal directions.

我做了这个方法。我不会在垂直和水平方向上工作。

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

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

#2

Maybe try with position: sticky; But without code, it is hard to see where the problem is.

也许尝试一下位置：粘性;但是没有代码，很难看出问题出在哪里。

#3

Well, in the end I just went with this solution: Fix and Scrollable table structure using html div

好吧，最后我只是使用了这个解决方案：使用html div修复和Scrollable表结构

It still uses absolute columns and so fixed widths and margins, but well I can live that as long as it works. About Angular component elements representing row of table, I just gave display: table-row to it and simply put td tags inside, so no longer need to use tr.

它仍然使用绝对列，因此固定的宽度和边距，但只要它工作，我可以生活。关于表示表行的Angular组件元素，我只给了display：table-row并简单地将td标签放在里面，所以不再需要使用tr。

#1