Angular: sticky generated columns

Question

I have a table that will have multiple columns as headers, these columns get generated according to different data. What I want to do is to set the left columns to be sticky when user scrolls.

This is what I've tried so far:

One table row:

<tr *virtualFor="let headerSet of sideHeaders;  index as rowIndex "
    class="border-right border-left   ">
    <th *ngFor="let header of headerSet; index as i"
         [attr.rowspan]="header.span"  StickyHeader class="stickyColumn">
        {{header.content}}</th>
    <td *lazyFor="let value of content[rowIndex]">
        {{value.value}}
    </td>

</tr>

headerSet is the set of headers I want to fix.

In the sticky header directive I have this code:

constructor(private element: ElementRef, private renderer: Renderer) { }

  ngAfterViewInit(): void {

    this.renderer.setElementStyle(this.element.nativeElement,'left', this.element.nativeElement.offsetLeft + "px")
  }

and CSS:

.stickyColumn{
  position: sticky;
  background: #fff;
  vertical-align: middle;
}

The sticky effect works with the above code, however, some of the td have wrong some additional offsetLeft value, and they overlap the next td.

I have tried to use renderer2, as well as getBoundingRect().left but the results are the same. So what am I doing wrong? any other approach is welcomed.

Notes: virtualFor and lazyFor are just directives to virtualise ngFor, of course I did replace them with ngFor but the error persisted.