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

时间:2018-08-23 14:08:06

标签: angular

我有一个主要的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.jsnpm install --save web-animations-jsnpm install --save intl)中运行了3个npm命令。

如何覆盖/修复此问题?

2 个答案:

答案 0 :(得分:1)

尝试一下:

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

答案 1 :(得分:0)

这将解决

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