PrimeNG Table能否同时启用双向滚动与虚拟滚动功能

PrimeNG Table 原生支持双向滚动、虚拟滚动两项功能同时启用，配置后横向滚动条消失属于配置缺失或版本兼容问题，并非功能不支持。

问题原因与对应修复方案 #

• 版本适配问题：11.x及更早版本未对双向虚拟滚动做适配，虚拟滚动逻辑会强制改写横向滚动容器的宽度计算规则，直接导致横向滚动条丢失。该组合能力从12.0.0正式版本开始稳定支持，低版本环境请先升级PrimeNG相关依赖。
• 缺少必填宽度配置：虚拟滚动开启后，表格行内容通过绝对定位渲染在可视区域内，滚动容器无法自动识别超出视口的列宽，必须显式配置两类宽度参数：
  1. 给<p-table>标签显式设置scrollWidth属性，值可设为所有列的总宽度像素值（如列总宽1800px则设scrollWidth="1800px"），也可设为scrollWidth="100%"配合列固定宽度使用
  2. 给所有列的表头、表体单元格设置固定宽度，禁止依赖内容自动撑开列宽
• 自定义样式冲突：如果全局样式中给.p-scroller、.p-table-virtual-scroll类添加了overflow-x: hidden属性，会直接隐藏横向滚动条，移除该冲突样式即可恢复。
• 版本已知bug：13.0.0~13.3.x版本存在兼容缺陷，开启可调整列宽功能（[resizableColumns]="true"）时会触发宽度计算错误，导致横向滚动失效，升级到13.4.0及以上补丁版本即可修复。

可正常运行的参考配置 #

<p-table
    [columns]="startColumns"
    [value]="data"
    [scrollable]="true" 
    scrollHeight="400px"
    scrollDirection="both"
    scrollWidth="1800px"
    [rows]="100"
    [virtualScroll]="true"
    [virtualRowHeight]="40"
>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [style.width.px]="col.width">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" [style.width.px]="col.width">
                {{row[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

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