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

滚动条导致Microsoft Edge中的表未对齐

1 个答案: