Полоса прокрутки вызывает смещение таблицы в Microsoft Edge

Question

Я настраиваю простую таблицу на работе с помощью Angular и столкнулся с проблемой. После того как я заморозил пару колонн. Всякий раз, когда я прокручиваю до конца, строки замороженных столбцов не совпадают со строками прокручиваемых столбцов. Эта проблема появляется только при использовании Edge и Firefox, но их необходимо использовать. Однако в Chrome строки выровнены.

Я пытался применить отступы и поля к элементам столбцов, но, похоже, это не работает. Следует также упомянуть, что я использую компоненты таблицы данных primeNg для настройки таблиц. Вот код HTML. Colgroup - это группа столбцов с прокруткой, а frozenName - это группа замороженных столбцов.

      <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>

При применении отступов и полей ошибок не возникает, но они отделяют строки от заголовка, а это не то, что мне нужно.

Answer 1

Я не думаю, что это проблема с вашим кодом, просто некоторые CSS не работают в Microsoft Edge, потому что над этим еще много работы.

У меня такая же проблема с моим сайтом.

Но вы можете попробовать что-то вроде этого: https://www.w3schools.com/howto/howto_css_four_columns.asp