pdatatable 中的内部 table - 列的宽度不相等
Inner table in pdatatable - columns not taking equal width
我有一个 pdatatable,在行扩展器模板中有一个内部 table。
但是内部 table 列的宽度不相等。屏幕截图已附上 below.There 第一列(名称)右侧的更多列是不可见的,除非我调整 columns.But 的大小你不能期望每个用户都这样做。
谁能告诉我为什么会这样。
模板-->
<p-dataTable [value]="tableData" [rows]="rows" [paginator]="paginate" [resizableColumns]="true" tableStyleClass="table-wrap" [rowsPerPageOptions]="[5,10,20]" expandableRows="{{setExpander}}">
<p-column *ngIf="setExpander" expander="true" styleClass="expander-icon-col"></p-column>
<div *ngFor="let col of tableOptions.columns">
<p-column *ngIf="col.field" [field]="col.field" [header]="col.header" [sortable]="col.sortable" [filter]="col.filter" [editable]="col.editable" [filterPlaceholder]="col.filterPlaceholder">
</p-column>
</div>
<template let-col let-index="rowIndex" pTemplate="rowexpansion" *ngIf="setExpander">
<p-dataTable [value]='subTableData[col[subTableOptions.mapperKey]]' [paginator]="paginate" [rows]='rows' [resizableColumns]="true" [rowsPerPageOptions]="[5,10,20]">
<div *ngFor="let colum of subTableOptions.columns">
<p-column *ngIf="colum.field" [field]="colum.field" [header]="colum.header" [sortable]="colum.sortable" [filter]="colum.filter" [filterPlaceholder]="colum.filterPlaceholder"></p-column>
</div>
</p-dataTable>
</template>
</p-dataTable>
我能够解决这个问题。这是由于某些 css 问题。 Primeng 正在添加 css table-layout:fixed 到内部 table ,将其更改为自动修复问题。
我有一个 pdatatable,在行扩展器模板中有一个内部 table。
但是内部 table 列的宽度不相等。屏幕截图已附上 below.There 第一列(名称)右侧的更多列是不可见的,除非我调整 columns.But 的大小你不能期望每个用户都这样做。
谁能告诉我为什么会这样。
模板-->
<p-dataTable [value]="tableData" [rows]="rows" [paginator]="paginate" [resizableColumns]="true" tableStyleClass="table-wrap" [rowsPerPageOptions]="[5,10,20]" expandableRows="{{setExpander}}">
<p-column *ngIf="setExpander" expander="true" styleClass="expander-icon-col"></p-column>
<div *ngFor="let col of tableOptions.columns">
<p-column *ngIf="col.field" [field]="col.field" [header]="col.header" [sortable]="col.sortable" [filter]="col.filter" [editable]="col.editable" [filterPlaceholder]="col.filterPlaceholder">
</p-column>
</div>
<template let-col let-index="rowIndex" pTemplate="rowexpansion" *ngIf="setExpander">
<p-dataTable [value]='subTableData[col[subTableOptions.mapperKey]]' [paginator]="paginate" [rows]='rows' [resizableColumns]="true" [rowsPerPageOptions]="[5,10,20]">
<div *ngFor="let colum of subTableOptions.columns">
<p-column *ngIf="colum.field" [field]="colum.field" [header]="colum.header" [sortable]="colum.sortable" [filter]="colum.filter" [filterPlaceholder]="colum.filterPlaceholder"></p-column>
</div>
</p-dataTable>
</template>
</p-dataTable>
我能够解决这个问题。这是由于某些 css 问题。 Primeng 正在添加 css table-layout:fixed 到内部 table ,将其更改为自动修复问题。