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

时间:2022-08-24 21:17:52

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


1  

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

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

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

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

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

#2


0  

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

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

#3


0  

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


1  

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

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

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

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

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

#2


0  

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

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

#3


0  

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。