Угловой: липкие сгенерированные столбцы

Question

У меня есть таблица, которая будет иметь несколько столбцов в качестве заголовков, эти столбцы генерируются в соответствии с различными данными. То, что я хочу сделать, это установить левые столбцы, чтобы быть липким, когда пользователь прокручивает.

Это то, что я пробовал до сих пор:

Одна строка таблицы:

<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 - это набор заголовков, которые я хочу исправить.

В директиве липкого заголовка у меня есть этот код:

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

  ngAfterViewInit(): void {

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

и CSS:

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

Эффект закрепления работает с приведенным выше кодом, однако некоторые из td имеют неправильное дополнительное значение offsetLeft, и они перекрывают следующее td.

Я пытался использовать renderer2, а также getBoundingRect (). Left, но результаты те же. Так что я делаю не так? любой другой подход приветствуется.

Примечания: virtualFor и lazyFor являются просто директивами для виртуализации ngFor, конечно, я заменил их на ngFor, но ошибка сохранилась.