PrimeNG中冻结表头随非冻结列滚动且表头对齐缺失问题

问题原因 #

同时启用pResizableColumn和pFrozenColumn时，PrimeNG的冻结表头与非冻结表头的宽度同步机制存在缺陷，滚动时冻结表头无法保持固定状态，且列宽调整后无法自动对齐冻结列的表头与内容区域。

解决方案 #

1. 监听列宽调整事件，同步冻结列表头宽度 #

通过监听表格的resizableColumnsResize事件，手动将调整后的列宽同步到对应的冻结表头元素上，确保表头与内容列宽度完全一致。

2. 初始化时同步冻结列宽度 #

在组件初始化完成后，强制同步一次冻结列的表头与内容宽度，避免初始加载时就出现对齐偏差。

修改后的代码实现 #

模板部分

<p-table
  [value]="customers"
  scrollDirection="both"
  [scrollable]="true"
  scrollHeight="400px"
  styleClass="p-datatable-gridlines"
  [resizableColumns]="true"
  (resizableColumnsResize)="onColumnResize($event)"
>
  <ng-template pTemplate="header">
    <tr>
      <th style="width:200px" pResizableColumn pFrozenColumn data-field="name">Name</th>
      <th style="width:100px" pResizableColumn pFrozenColumn data-field="id">Id</th>
      <th style="width:200px" pResizableColumn pFrozenColumn data-field="country">Country</th>
      <th style="width:200px" pResizableColumn data-field="date">Date</th>
      <th style="width:200px" pResizableColumn data-field="company">Company</th>
      <th style="width:200px" pResizableColumn data-field="status">Status</th>
      <th style="width:200px" pResizableColumn data-field="activity">Activity</th>
      <th style="width:200px" pResizableColumn data-field="status2">Status</th>
      <th style="width:200px" pResizableColumn data-field="activity2">Activity</th>
      <th style="width:200px" pResizableColumn data-field="representative">Representative</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-customer>
    <tr>
      <td style="width:200px" pFrozenColumn data-field="name">{{ customer.name }}</td>
      <td style="width:100px" pFrozenColumn data-field="id">{{ customer.id }}</td>
      <td style="width:200px" pFrozenColumn data-field="country">{{ customer.country.name }}</td>
      <td style="width:200px" data-field="date">{{ customer.date }}</td>
      <td style="width:200px" data-field="company">{{ customer.company }}</td>
      <td style="width:200px" data-field="status">{{ customer.status }}</td>
      <td style="width:200px" data-field="activity">{{ customer.activity }}</td>
      <td style="width:200px" data-field="status2">{{ customer.status }}</td>
      <td style="width:200px" data-field="activity2">{{ customer.activity }}</td>
      <td style="width:200px" data-field="representative">{{ customer.representative.name }}</td>
    </tr>
  </ng-template>
</p-table>

组件逻辑部分

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, AfterViewInit {
  customers: any[];
  @ViewChild(Table) table: Table;

  ngOnInit() {
    // 初始化你的customers数据
    this.customers = /* 替换为你的业务数据 */;
  }

  ngAfterViewInit() {
    // 初始化时同步冻结列宽度
    this.syncFrozenColumnWidths();
  }

  onColumnResize(event: any) {
    const field = event.column.field;
    const newWidth = event.columns[event.index].style.width;
    
    // 同步冻结表头宽度
    const frozenHeaderTh = document.querySelector(`th.p-frozen-column[data-field="${field}"]`);
    if (frozenHeaderTh) {
      (frozenHeaderTh as HTMLElement).style.width = newWidth;
    }

    // 同步冻结列内容宽度
    const frozenBodyTds = document.querySelectorAll(`td.p-frozen-column[data-field="${field}"]`);
    frozenBodyTds.forEach(td => {
      (td as HTMLElement).style.width = newWidth;
    });
  }

  syncFrozenColumnWidths() {
    const frozenHeaders = document.querySelectorAll('th.p-frozen-column');
    frozenHeaders.forEach((header: HTMLElement) => {
      const field = header.getAttribute('data-field');
      const bodyTd = document.querySelector(`td.p-frozen-column[data-field="${field}"]`);
      if (bodyTd) {
        header.style.width = (bodyTd as HTMLElement).style.width;
      }
    });
  }
}

额外注意事项 #

• 优先使用PrimeNG 14.x及以上版本，新版本对冻结列与可调整列的兼容性做了优化。
• 避免在自定义CSS中覆盖.p-frozen-column的position属性（默认是sticky），否则会导致冻结表头失去固定效果。
• 不要在模板的宽度样式中添加!important，否则会阻止同步后的宽度生效。

内容的提问来源于stack exchange，提问作者Visweswara rao