PrimeNG可展开表格触发行展开时父行宽度缩小如何解决？

问题根源 #

PrimeNG可展开表格出现父行宽度缩小的核心原因是默认表格采用auto布局模式，展开行的内容宽度会反向参与整表的列宽计算，最终导致原有父行列宽被压缩。

解决方案 #

按优先级依次操作即可解决：

1. 给p-table组件强制开启固定布局模式
   给你的p-table标签添加tableLayout="fixed"属性，固定布局下列宽仅由表头和第一行父元素的宽度定义决定，不会被展开行内容影响：

   <p-table 
     [value]="yourDataList" 
     tableLayout="fixed" 
     [rowExpandable]="true"
     <!-- 其他原有属性保持不变 -->
   >
   

2. 为所有表头列明确设置固定宽度
   每一列（包括展开按钮所在的第一列）都要显式设置宽度值，避免自适应计算偏差：

   <ng-template pTemplate="header">
     <tr>
       <!-- 展开按钮列必须指定宽度 -->
       <th style="width: 60px"></th>
       <th style="width: 220px">列1名称</th>
       <th style="width: 180px">列2名称</th>
       <th style="width: 150px">列3名称</th>
       <!-- 其余列依次设置宽度 -->
     </tr>
   </ng-template>
   

3. 为展开行内容添加溢出处理
   避免展开行内容过长顶破表格布局，添加全局样式：

   .p-table .p-rowexpansion-content {
     overflow-x: auto;
     width: 100%;
     box-sizing: border-box;
   }
   

异常排查 #

如果按以上操作仍有问题，检查两点：

• 是否有全局table、td、th的自定义样式和PrimeNG默认样式冲突
• 展开行的自定义内容是否设置了超出父容器的固定宽度

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