启用滚动后如何以角度对齐未对齐的 p 表标题？答案

【问题标题】：How to align misaligned p-table headers in angular after enabling the scroll?启用滚动后如何以角度对齐未对齐的 p 表标题？
【发布时间】：2020-09-15 14:11:23
【问题描述】：

我有一个带有身体的 p 表。在启用滚动之前，标题和正文中的复选框以及其他标题对齐是完美的。但是将[scrollable]=true和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>

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

【问题讨论】：

标签： header scrollable primeng-table p-table

【解决方案1】：

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

<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 后数据显示为省略号
th 上的宽度与td 上的宽度相同

【讨论】：

style="width: 100vw" on th & td 为我修好了，谢谢！
@luke.mas 听起来不错:)