Angular Material可展开表格折叠后行间距异常求助

问题根源 #

Bootstrap的table tr默认带有0.75rem的padding，导致折叠后的展开行（example-detail-row）仍会露出间隙，直接全局修改tr的padding会破坏正常行样式，需要针对性处理。

针对性解决方案 #

1. 精准CSS选择器覆盖展开行padding

在组件的compare-page.component.css中添加以下样式，仅对展开详情的行去除padding，不影响正常行：

/* 只针对展开详情的行设置padding为0 */
tr.example-detail-row {
  padding: 0;
}

/* 确保折叠时内部容器无额外间距 */
.example-element-detail {
  box-sizing: border-box;
}

如果Bootstrap的样式优先级更高，可添加!important（尽量避免，优先用精准选择器）：

tr.example-detail-row {
  padding: 0 !important;
}

2. 优化动画状态，增强折叠隐藏效果

修改组件中的动画配置，添加overflow: hidden确保折叠时内容完全隐藏：

animations: [
  trigger('detailExpand', [
    state('collapsed', style({height: '0px', minHeight: '0', overflow: 'hidden'})),
    state('expanded', style({height: '*', overflow: 'visible'})),
    transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
  ]),
]

3. 修复模板拼写错误

注意到模板中的*nfIf是拼写错误，应改为*ngIf，避免功能异常：

<!-- 错误写法 -->
<div *nfIf="expandedElement === element; else elseBlock "> 
<!-- 正确写法 -->
<div *ngIf="expandedElement === element; else elseBlock "> 

原理说明 #

通过精准选择器定位到仅展开详情的行（.example-detail-row），去除其padding，同时优化动画的overflow属性，确保折叠时内容完全被隐藏，既解决间隙问题，又保留正常行的Bootstrap样式。

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