Scrollbar causes misalignment of table in Microsoft Edge - html

Question

I'm setting up a simple table at work using Angular and have come across a problem. After I froze a couple of the columns. Whenever I scroll all the way to the bottom, the frozen columns' rows are misaligned with the scrolling columns' rows. This problem only shows up when using Edge and Firefox but it's necessary to use them. However, in Chrome the rows are aligned.
I've tried applying padding and margins to the columns' elements but it doesn't seem to work. I should also mention that I'm using the primeNg data table components to set up the tables. Here's the HTML code. Colgroup is the group of columns that scroll and frozenName is the group of columns that are frozen.
<p-table [columns]="scrollableCols" [value]="data"
[scrollable]="true" [frozenColumns] = "frozenName" [frozenValue] =
"frozendata" scrollHeight="300px" frozenWidth='400px'
[style] = "{width:'1000px'}" >
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:200px" >
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns >
<tr>
<th *ngFor= "let col of columns" >
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="frozenrows" let-rowData let-columns="columns">
<tr>
<td *ngFor= "let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" >
<tr>
<td *ngFor= "let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
No errors occur when applying padding and margins but they separate the rows from the header which is not what I want.

Answer 1

I don't think this is a problem with your code it's just that some css doesn't work in Microsoft Edge, because there is still a lot of work to do on it.
I also have the same problem with my website.
But you could try something like this:
https://www.w3schools.com/howto/howto_css_four_columns.asp