滚动条导致 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