фиксированный заголовок таблицы в модальном, угловом приложении 6

Question

Ниже приведен код файла component.ts как часть кода класса:

@ViewChild('stickyMenu') menuElement!: ElementRef;
  sticky: boolean = false;
  elementPosition: any;

  ngAfterViewInit() {
    this.elementPosition = this.menuElement.nativeElement.offsetTop;
  }

  @HostListener('window:scroll', ['$event'])
  handleScroll() {
    const windowScroll = window.pageYOffset;
    if (windowScroll >= 50) {
      this.sticky = true;
    } else {
      this.sticky = false;
    }



  }

и ниже HTML-код для component.html

<div class="modal-header">

    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">×</span></button>

    </div>
    <div class="box-body"> 
      <div>{{record.startRecord}}-{{record.endRecord}} of over {{pager.totalCount}} in SX orders</div>
      <hr>
      <div class="custom_table">
         <div class="sticky-header" #stickyMenu [class.sticky] = "sticky">


        <div class='theader'>   

          <div class='table_header'>Status</div>
          <div class='table_header'>Order</div>
          <div class='table_header'>Date</div>
          <div class='table_header'>Actors</div>
          <div class='table_header txt-right'>Quantity</div>
          <div class='table_header txt-right'>Amount</div>
        </div>
        <div class='table_row'>
          <div class='table_small'>
            <div class='table_cell'>Instrument</div>
            <div class='table_cell'>
              <p>Name</p>
              <p>ISIN</p>
            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell'>Status</div>
            <div class='table_cell'>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell'>Order</div>
            <div class='table_cell'>
              <p>Operation</p>
              <p>Order Nature</p>
            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell'>Date</div>
            <div class='table_cell'>
              <p>Executed</p>
              <p>Submitted</p>
            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell'>Actors</div>
            <div class='table_cell'>
              <p>Initiator</p>
              <p>RM</p>
            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell txt-right'>Quantity</div>
            <div class='table_cell txt-right'>
              <p>Executed</p>
              <p>Ordered</p>
            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell txt-right'>Amount</div>
            <div class='table_cell txt-right'>
              <p class="txt-right">Gross Amount</p>
              <p class="txt-right">Net Amount</p>
            </div>
          </div>
        </div>
      </div>
        <div class='table_row' *ngFor="let data of pendingSxOrder;let i=index">

          <div class='table_small'>
            <div class='table_cell'>Instrument</div>
            <p>{{data.instrument.name}}</p>
            <p>{{data.instrument.isin}}</p>

          </div>

          <div class='table_small'>
            <div class='table_cell'>Status</div>
            <div class='table_cell'>
              <p class="status">{{data.orderStatus}}</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p id="collapse" *ngIf="data.show">
                Deal Number
              </p>
              <p id="collapse" *ngIf="data.show">{{data.dealNumber}}</p>
            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell'>Order</div>
            <div class='table_cell'>
              <p>{{data.executionDate | date: 'dd/MM/yy hh:mm'}}</p>
              <p>{{data.orderType.name}}</p>
              <p>&nbsp;</p>
              <p id="collapse" *ngIf="data.show">
                Operation Number
              </p>
              <p id="collapse" *ngIf="data.show">{{data.operationNumber}}</p>
            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell'>Date</div>
            <div class='table_cell'>
              <p>{{data.executionDate| date: 'dd/MM/yy hh:mm'  }}</p>
              <p>{{data.submittedDate | date: 'dd/MM/yy hh:mm' }}</p>
              <p>&nbsp;</p>
              <p id="collapse" *ngIf="data.show">
                Operation value
              </p>
              <p id="collapse" *ngIf="data.show">{{data.operationValue }}</p>
            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell'>Actors</div>
            <div class='table_cell'>
              <p>{{data.initiator}}</p>
              <p>{{data.portfolio.relationshipManager.name }}</p>
              <p>&nbsp;</p>
              <p id="collapse" *ngIf="data.show">
                Limit Date
              </p>
              <p id="collapse" *ngIf="data.show">{{data.orderDate | date: 'dd/MM/yy'}}</p>

            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell txt-right'>Quantity</div>
            <div class='table_cell'>
              <p class="txt-right">{{data.executedQuantity}}</p>
              <p class="txt-right">{{data.orderedQuantity}}</p>
              <p class="txt-right">&nbsp;</p>
              <p class="txt-right" id="collapse" *ngIf="data.show">
                Limit Price
              </p>
              <p class="txt-right" id="collapse" *ngIf="data.show">USD {{data.limitStopPrice}}</p>

            </div>
          </div>
          <div class='table_small'>
            <div class='table_cell txt-right'>Amount</div>
            <div class='table_cell'>
              <p class="txt-right">USD {{data.operationGrossAmount}}</p>
              <p class="txt-right">USD {{data.operationNetAmount}}</p>  
            </div>
          </div>
        </div> 
      </div>
      <br/>
      <br/>
      <ngb-pagination [collectionSize]="pager.totalCount" [page]="pager.pageNumber" 
      (pageChange)=" consultPendingOrder($event)"
        [maxSize]="3"  [ellipses]="false" [rotate]="true"></ngb-pagination>
    </div>

Вышеуказанная функциональность реализована в модальных окнах, где работает липкая штука, но столбец и строки не синхронизированы, строки перемещаются в левую часть модального окна с заголовком столбца.

Может кто-нибудь, пожалуйста, помогите мне в этом. выше изображение является результатом изображения.