2

我有一个带有身体的 p 表。在启用滚动之前，标题和正文中的复选框以及其他标题对齐是完美的。但是在将[scrollable]=trueand添加scrollHeight="200px"到 p-table 标记之后，标题与行不对齐。

以下是我的 p-table 代码：

<p-table [columns]="columns" [value]="values" [(selection)]="selectedRowData"
                 [scrollable]="true" scrollHeight="200px">
            <ng-template pTemplate="header" let-gridColumns>
                <tr>
                    <th style="width: 3em">
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th *ngFor="let col of gridColumns">
                        {{col.header}}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-gridColumns="columns">
                <tr>
                    <td>
                        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                    </td>
                    <td *ngFor="let col of gridColumns" style="word-break: break-all; max-width: 100px;">
                        {{rowData[col.field]}}
                    </td>
                </tr>
            </ng-template>
        </p-table>

有人可以帮我将标题与其行对齐吗？提前致谢

4

1 回答 1

1

我遇到了同样的问题，在我的场景中，它通过在列添加[scrollable]="true"之后scrollHeight和添加宽度来解决。喜欢

<p-table [columns]="columns" [value]="values" [(selection)]="selectedRowData" [responsive]="true" 
                scrollHeight="248px" scrollDirection="both" [autoLayout]="true" [scrollable]="true">
            <ng-template pTemplate="header" let-gridColumns>
                <tr>
                    <th style="width: 3em">
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th style="width: 100vw;" *ngFor="let col of gridColumns">
                        {{col.header}}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-gridColumns="columns">
                <tr>
                    <td style="width: 3em">
                        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                    </td>
                    <td *ngFor="let col of gridColumns" style="width: 100vw !important; overflow: hidden; text-overflow: ellipsis;">
                        {{rowData[col.field]}}
                    </td>
                </tr>
            </ng-template>
        </p-table>

笔记：

  • 100vw后数据显示为省略号
  • 相应的宽度与 onth相同td
于 2021-08-30T19:16:28.573 回答