如何实现PrimeNG表格仅自身带横向滚动条，消除全局滚动条？

要解决表格自身滚动条与全局页面滚动条并存的问题，核心是让表格内容在固定高度的容器内滚动，避免撑大整个页面。以下是具体可行方案：

步骤1：给表格添加自定义类并设置样式 #

先在<p-table>标签上添加自定义类（比如fixed-table-container），再通过CSS限制容器高度，让表格内容仅在内部滚动：

修改后的表格代码 #

<p-table #dt 
         [value]="detail_records" 
         [paginator]="true" 
         [rows]="10" 
         [totalRecords]="detail_records.length" 
         [rowsPerPageOptions]="[10, 20, 30, 50]" 
         [globalFilterFields]="['status', 'submission', 'recipient', 'ditribution', 'group', 'user', 'file', 'reference', 'detail']" 
         dataKey="file" 
         (onFilter)="onFilter($event)" 
         class="ui-table-striped fixed-table-container" 
         rowExpandMode="single"
         responsiveLayout="scroll"> 
</p-table>

对应CSS样式 #

/* 限制表格容器最大高度，视口高度减去页面其他元素（导航、标题、分页器等）的总高度 */
.fixed-table-container {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

/* 可选：固定表头，滚动内容时表头保持在顶部，提升阅读体验 */
.fixed-table-container .p-table-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff; /* 替换为你实际的表头背景色 */
}

步骤2：调整高度数值适配你的页面 #

calc(100vh - 220px)中的220px需要根据页面实际布局修改：

• 比如页面顶部导航栏高100px、标题区域50px、分页器70px，总和就是220px
• 确保计算后表格容器高度不超出视口，这样页面就不会出现全局滚动条

备选方案：针对PrimeNG内部滚动容器设置 #

如果直接给p-table设置样式无效，可以针对PrimeNG生成的滚动体容器单独设置：

.fixed-table-container .p-table-scrollable-body {
  max-height: calc(100vh - 280px); /* 额外减去表头的高度，数值按需调整 */
}

关键注意点 #

• 检查页面body或根容器的overflow-x设置，若存在overflow-x: auto可改为overflow-x: hidden（确保表格横向滚动足够覆盖内容）
• 分页器若在表格外部，计算高度时要把分页器高度包含在减去的数值里

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