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

Question

我有一个带有身体的 p 表。在启用滚动之前，标题和正文中的复选框以及其他标题对齐是完美的。但是在 p-table 标记中添加

[scrollable]=true

和

scrollHeight="200px"

后，标题与行不对齐。

下面是我的 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>

有人可以帮我将标题与其行对齐吗？ 预先感谢

Answer 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后数据显示为省略号

• th

  上的宽度相应地与

  td

上的宽度相同

Answer 2

我遇到了同样的问题，我的解决方案包含了之前答案的一部分，但还需要设置

min-width

。你的可以在没有

min-width

的情况下工作，但我的需要它才能正常工作。我们在 PrimeNG

"primeng": "11.3.1",

工作示例：

#idOfPTableElement {
  th {
    width: 100vw !important;
    min-width: 210px;
  }

  td {
    width: 100vw !important;
    min-width: 210px;
  }
}

相对于此主题/问题，p 表的标题和正文是单独的表。此外，我必须使用以下内容来修复我遇到的正文（实际表数据部分/正文）对齐问题。没有它，下层表格看起来是缩进的，并且永远不会与上层表格（标题表）对齐

  .p-datatable-scrollable-header-box {
    padding-right: 0px !important;
  }

Answer 3

其实这是primeng端的一个bug，当p-table标签添加可滚动高度并且行数更多时就会出现这个问题。 当只有一行时，就不存在这个问题。

解决方案： 不要使用可滚动和滚动高度，而是将高度添加到表的父级 tab 中。通过下面提到的方法，我能够解决对齐问题。

例如：`

<div style ="max-height:60vh;overflow:auto">
<p-table></p-table>
</div>

`