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?
1
-
Can we see some code examples of what you've tried?jock.perkins– jock.perkins2017-05-17 07:33:17 +00:00Commented May 17, 2017 at 7:33
Add a comment
|
3 Answers
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.
Comments
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;
}
Comments
Maybe try with position: sticky; But without code, it is hard to see where the problem is.
