PrimeNg可展开子表格滚动时覆盖父表格表头问题求助

兄弟我之前也踩过PrimeNG表格的这个坑！行展开的子表格滚动时盖住父表头，基本都是z-index层级冲突或者表头的粘性定位没生效导致的，给你几个亲测有效的解决办法：

• 调整CSS层级关系，强制让父表头在子表格上方：
  给父表格的表头和子表格分别设置z-index，同时确保父表头是粘性定位（这样滚动时才会固定在顶部）：

  /* 父表格表头样式 */
  .p-datatable .p-datatable-header {
    position: sticky;
    top: 0;
    z-index: 10 !important;
    background-color: #fff; /* 加上背景色防止下方内容透过来 */
  }
  
  /* 子表格样式，降低层级 */
  .p-datatable .p-datatable-child-table {
    z-index: 1 !important;
  }
  

• 检查父表格的滚动配置
  如果你给父表格设置了scrollHeight属性，要确保表头的sticky特性正常工作。有时候自定义样式会覆盖PrimeNG的默认粘性定位，这时候手动加上position: sticky和top: 0就很关键。

• 针对新版本PrimeNG的优化
  如果你用的是较新的PrimeNG版本，可以尝试给父表格的headerStyleClass属性指定一个自定义类，然后在这个类里设置z-index和粘性样式，这样比全局样式更精准，不会影响其他表格：

  <p-table [headerStyleClass]="'parent-table-header'">
    <!-- 表格内容 -->
  </p-table>
  

  对应的CSS：

  .parent-table-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
  }
  

试一下这些方法，应该就能解决子表格覆盖表头的问题啦！

备注：内容来源于stack exchange，提问作者Haster