如何让PrimeNG表格主体显示水平滚动条而非左右箭头

核心解决方案 #

先确认你的PrimeNG版本：新版本（v10+）已将类名前缀从ui-改为p-，需对应调整CSS选择器，同时添加浏览器兼容属性强制显示滚动条：

/* 适用于PrimeNG v10+版本 */
:host ::ng-deep .p-table-resizable > .p-table-wrapper {
  overflow-x: auto !important;
  /* 强制Firefox显示滚动条 */
  scrollbar-width: auto;
  /* 强制IE/Edge显示滚动条 */
  -ms-overflow-style: auto;
}

/* 适用于PrimeNG旧版本 */
:host ::ng-deep .ui-table-resizable > .ui-table-wrapper {
  overflow-x: auto !important;
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

额外排查点 #

• 检查表格父容器是否设置了overflow: hidden，若有需改为overflow: visible或移除该属性，避免滚动条被父容器截断。
• 确保表格内容总宽度超过容器宽度，滚动条仅在内容溢出时才会显示，可给表格列设置固定宽度或增加列数测试。
• 如果表格启用了scrollable属性，确认未开启仅箭头导航的配置，或调整scrollWidth属性为合适值。

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