Display column using div dynamically having first column fixed and rest of all with horizontal scrollbar

I need your help.

I am creating an N-level nested table with dynamic columns

So what I want to do is, I want to create a table having a variable number of columns based on user selection for that I have created a simple drop-down box, according to drop-down selection, those selected columns will appear in the table

What I want is my first column of the table should be always fixed and while others can be scroll-able horizontally, and the width of those columns should be adjusted as column displays or hides

I don't want to use any external libraries. I have created a custom table based on div along with grid CSS

Below are screenshots of things that I have done till now

Here is code for reference:

HTML:

<ng-container *ngFor="let rData of reportData; let i = index; last as isLast" >
  <div class="myTr report-row">
    <div class="myTd">
        <button 
           class="btn report-btn-sm" 
           *ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == true"
           (click)="splitData(rowWiseFilterObj(rData,this.splitOpt[0].id),this.splitOpt[0].id,sFilters,splitOpt,i,rData,selectedDate)"
           row="rData">+</button>
        <button 
           class="btn report-btn-sm" 
           *ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == false" 
           (click)="removeDynamicComponent(rData,i)"
           >-</button>
           <span *ngIf="this.splitOpt[0].id == 'campid'"></span>

          <span *ngIf="this.splitOpt[0].id !== '__time' && this.splitOpt[0].id !== 'campid'"></span>
          <span *ngIf="this.splitOpt[0].id === '__time'"></span>


    </div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd"></div>
      <div class="myTd"></div>
      <div class="myTd"></div>
      <div class="myTd"></div>
      <div class="myTd">$ </div>
      <div class="myTd">
        <button class="btn btn-secondary m-btn m-btn--label-danger m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" *ngIf="this.splitOpt[0].id=='campid'" (click)="excludeReport(rowWiseFilterObj(rData,this.splitOpt[0].id))"> <i class="la la-close"></i> </button>
        <button class="btn btn-secondary m-btn m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" disabled="disabled" *ngIf="this.splitOpt[0].id!='campid'"> <i class="la la-ban"></i> </button>

      </div>
    </div></div>
  </div>

  <div *ngIf="isLast" class="text-right col-12">

            <a href="javascript:void(0)" class="m-link" (click)="loadmore()" style="    margin: 10px -30px 15px 10px;
    background: #5ccdde;
    color: #fff;
    padding: 2px 10px;
    font-size: 12px;" *ngIf="reportData.length > 19"> Load more </a>
        </div>
    <ng-template #dynamic ></ng-template>

    </ng-container>
  <div class="myTr" style="margin-top:20px;">
    <div class="myTd"></div>
    <div class="myTdGroupBox"><div class="myTdGroup">
      <div class="myTd"></div>
    </div></div>
  </div>
</div>

JS:

getReport() {
        this.hidePopup();
        if(this.splitOpt.length === 0) {
            // this.updateGraph(this.currentGraphSelection);
            return false;
        } 


        var apiFilters: any = [{}];
        for (var i = 0; i < this.sFilters.length; i++) {
            if (this.sFilters[i].values.length > 0) {
                var k;
                k = this.sFilters[i].id
                apiFilters[0][k] = this.sFilters[i].values
            }
        }

        var split = this.splitOpt[0].id;
        this.reportData=[];
        this.reportLoading = true;
        this._apis.getReportData(split, apiFilters[0],this.selectedDate,1,20).subscribe(response => {
            if (response.status == 1200) {
                this.reportData = response.data.split_by_data;
                this.reportData.map(function(obj) {
                  obj.isCollapsed = true;
                  return obj;
               });
            this.totalImpressions=response.data.totalCount[0].impressions;
            this.totalConversions=response.data.totalCount[0].conversions;
            this.totalBids=response.data.totalCount[0].bids;
            this.totalWins=response.data.totalCount[0].wins;
            this.totalSpend=response.data.totalCount[0].spend;
               this.reportLoading = false;
               var contentGroups = document.querySelectorAll('.myTr:not(:last-child) .myTdGroupBox');
var ctrlGroup = document.querySelector('.myTr:last-child .myTdGroupBox');
ctrlGroup.addEventListener('scroll', (ev)=> {
    contentGroups.forEach((g)=> g.scrollTo(ctrlGroup.scrollLeft, 0) );
});
               this.cd.detectChanges();

            }
        });
    }

from Display column using div dynamically having first column fixed and rest of all with horizontal scrollbar