CODEWITHSUNDEEP
htmlcsstwitter-bootstrapangular
Blind Despair
Blind Despair

Reputation: 3295

How to make table column scrollable with multiple columns frozen in 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?

Upvotes: 2

Views: 3402

Answers (3)

Filipe Mendes
Filipe Mendes

Reputation: 185

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

Upvotes: 1

Blind Despair
Blind Despair

Reputation: 3295

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.

Upvotes: 1

VLE
VLE

Reputation: 21

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

Upvotes: 0

Related Questions