angular - PrimeNG 的 Turbo Table 在 IE11 和 Edge 浏览器上显示滚动条，即使 [可滚动] 输入字段已禁用

Question

我也在 GitHub 上提到了这个问题，但还没人回答，所以我试图在这里寻求一些帮助:

我使用了带有可调整大小的列的 Turbo-Table，并将 [scrollable] 属性设置为 false，并且我的表是在 Microsoft Edge 和 Internet Explorer 11 浏览器上使用不必要的垂直和水平滚动条创建的(Chrome 和 FireFox 正确处理了该问题)。有谁知道如何摆脱这些多余的滚动条？

一些环境详细信息:

PrimeFaces version: 5.2.4 (Also occurs on last version (6-Alpha))
Browsers: Microsoft Edge 42.17134.1.0, Microsoft IE11.0.65 (Works well on Chrome and FireFox)

重现步骤:

构建一个简单的文本数据表，大约有 10 行，具有可调整大小的列和 [scrollable]="false"

代码如下:

app.component.html

<p-table [value]="cars" [resizableColumns]="true" [scrollable]="false">
  <ng-template pTemplate="header">
    <tr>
      <th *ngFor="let col of cols" pResizableColumn>
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-car>
    <tr>
      <td *ngFor="let col of cols" class="ui-resizable-column">
        {{car[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

app.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: []
})
export class AppComponent implements OnInit {

  constructor() {
  }

  cars: any[];

  cols: any[];

  ngOnInit() {
    this.cars = [
      {vin: '11', year: '1111', brand: 'dddd', color: 'blue', madeIn: 'Japan'},
      {vin: '12', year: '1112', brand: 'aaaa', color: 'green', madeIn: 'Germany'},
      {vin: '13', year: '1113', brand: 'cccc', color: 'yellow', madeIn: 'Japan'},
      {vin: '14', year: '1114', brand: 'dddd', color: 'blue', madeIn: 'Japan'},
      {vin: '15', year: '1115', brand: 'aaaa', color: 'green', madeIn: 'Korea'},
      {vin: '16', year: '1116', brand: 'cccc', color: 'black', madeIn: 'China'},
      {vin: '17', year: '1117', brand: 'dddd', color: 'blue', madeIn: 'USA'},
      {vin: '18', year: '1118', brand: 'aaaa', color: 'green', madeIn: 'Japan'},
      {vin: '19', year: '1119', brand: 'cccc', color: 'grey', madeIn: 'Germany'},
      {vin: '20', year: '1120', brand: 'dddd', color: 'blue', madeIn: 'France'},
    ];

    this.cols = [
      {field: 'vin', header: 'Vin'},
      {field: 'year', header: 'Year'},
      {field: 'brand', header: 'Brand'},
      {field: 'color', header: 'Color'},
      {field: 'madeIn', header: 'Made In'}
    ];
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import {TableModule} from 'primeng/table';
import {AppComponent} from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

使用 PrimeNG 6.1.0，这个问题看起来已得到解决。但是当我使用 [autoLayout]="true" 使列不固定时，我遇到了同样的问题。 该问题出现在样式类 ui-table-wrapper 中，该类具有 overflow-x: auto 样式，并在 IE 中显示水平和垂直滚动条。 作为解决方法，我添加了样式类来覆盖 CSS 中的此行为:

.non-scrollable-table .ui-table-wrapper {
     overflow-x: visible !important;
}

并将此类添加到 p-table 标记之前的 div 中，如下所示:

<div class="non-scrollable-table">
    <p-table
       ...
    </p-table>
</div>

这应该有帮助。

更新 由于 PrimeNG 组件中使用的 IE11 中缺少字体，也会出现此问题。可以通过在 CSS 中添加字体来修复:

*::-ms-backdrop, .ui-widget {
    font-family: "Segoe UI", "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif;
 }

添加此字体还可以修复 IE11 中的一些其他样式问题。