冻结列和可滚动列数据与primeng表不一致答案

【问题标题】：frozen column and scrollable column data is getting misaligned with primeng table冻结列和可滚动列数据与primeng表不一致
【发布时间】：2020-01-26 15:14:00
【问题描述】：

我正在尝试使用 p-table of primeng 和冻结列来显示数据。如果冻结列数据不适合一行，则冻结列和可滚动列数据未对齐（如下所示）：-

代码：-

 <p-table #dt dataKey="question" [columns]="scrollableColsForQuestionsStats" [frozenColumns]="frozenColsForQuestionStats"
               [paginator]="true" [rows]="3" [value]="questionStats" [scrollable]="true">
        <ng-template pTemplate="caption">
          <div class="ui-helper-clearfix" style="text-align: left">
            <button type="button" pButton icon="fa fa-file" iconPos="left" label="CSV" (click)="dt.exportCSV()" style="margin-right: 0.5em;"></button>
          </div>
        </ng-template>
        <ng-template pTemplate="colgroup" let-columns>
          <colgroup>
            <col *ngFor="let col of columns" style="width:300px" [pSortableColumn]="col.field">
          </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
              {{col.header}}
              <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
          <tr>
            <td *ngFor="let col of columns">
              {{rowData[col.field]}}
            </td>
          </tr>
        </ng-template>
      </p-table>

谁能帮我解决这个问题？

【问题讨论】：

这很明显是因为第一列的内容与表格的 冻结宽度 (frozenWidth) 相比太长了。您想在第一列中显示全部内容吗？或者我们可以覆盖样式类以使用省略号（一些内容......）。 body .ui-table .ui-table-tbody > tr > td { background-color: inherit; border: 1px solid #c8c8c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@Birana - 我想展示全部内容。

标签： angular primeng primeng-turbotable

【解决方案1】：

我想这会对你有所帮助。

如下覆盖您的 PrimeNG 样式。

body .ui-table .ui-table-tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 50px;
}

body .ui-table .ui-table-tbody > tr>td:hover {
    overflow: auto;
    text-overflow: initial;
}

作为初始加载，它将用省略号显示单元格内容。然后将鼠标悬停在单元格上会出现一个水平滚动条，可以在滚动的同时查看整个内容。

StackBlitz Demo

【讨论】：