How to make table column scrollable with multiple columns frozen in Angular 2?

Question

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?

Answer 1

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

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.

Answer 2

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;
}

Answer 3

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