Question

我有一个主要的p表组件。该表在Chrome和Firefox中显示正常，但仅占IE中页面的一半左右。

我只是包含了没有内容的p-table元素。

<p-card>
<p-table #subsTable
           [value]="subs"
           sortMode="multiple"
           selectionMode="single"
           (onRowSelect)="onRowSelect($event)"
           (onRowUnselect)="onRowUnselect($event)"
           [(selection)]="selectedSub"
           [columns]="columns"
           dataKey="subId"
           [paginator]="subs.length > 0"
           (onPage)="onPageChange($event)"
           [rows]="5"
           >
    </p-table>
    </p-card>

css：

.ui-table table {
    table-layout: auto !important;
}

问题是table-layout: fixed;是从.ui-table table css块的primeng继承的。如您所见，我尝试用自己的CSS覆盖它，但这没有用。我还在polyfills.ts（npm install --save classlist.js，npm install --save web-animations-js和npm install --save intl）中运行了3个npm命令。

如何覆盖/修复此问题？

Answer 1

尝试一下：

::ng-deep .ui-table table {
    table-layout: auto;
}

Answer 2

这将解决

const trs = this.element.nativeElement.querySelectorAll(".ui-table-scrollable-body-table tbody tr");
        
        if (trs && trs.length) {
          const tr = trs[0];
          const tds = tr.querySelectorAll("td")
          if (tds && tds.length) {
            tds[tds.length - 1].style.width = "101%";
            setTimeout(function () {
              tds[tds.length - 1].style.width = "100%";
            }, 10)
          }
        }
      }, 50);

IE浏览器无法正确呈现primenging p表

2 个答案: