Angular Material 的 mat-table 在实现可展开行时，常因默认单元格内边距导致折叠状态下仍显示多余空白；本文提供精准 CSS 定位修复方案，仅作用于展开内容行，避免影响常规行样式。
angular material 的 `mat-table` 在实现可展开行时，常因默认单元格内边距导致折叠状态下仍显示多余空白；本文提供精准 css 定位修复方案，仅作用于展开内容行，避免影响常规行样式。
在使用 Angular Material 的 mat-table 构建可展开行（expandable rows）时，一个常见但易被忽略的问题是：即使行处于折叠状态，仍可见一条细小的空白缝隙（如截图所示）。该问题并非源于动画逻辑或模板结构错误，而通常由外部样式库（如 Bootstrap）或全局 CSS 规则对 <td> 元素施加了统一的 padding（例如 0.75rem）所致。
直接将所有表格单元格的 padding 设为 0 虽可消除缝隙，但会破坏标准数据行的视觉层次与可读性——这显然不可取。正确解法是精准定位、按需覆盖：仅对承载展开内容的特殊单元格（即 matColumnDef="expandedDetail" 对应的 <td>）移除内边距，其他单元格样式保持不变。
✅ 推荐修复方式：内联样式精准控制
在 matColumnDef="expandedDetail" 的 <td> 标签上添加内联样式 style="padding: 0;"，如下所示：
<ng-container matColumnDef="expandedDetail">
<td mat-cell
*matCellDef="let element"
[attr.colspan]="columnsToDisplayWithExpand.length"
style="padding: 0;"> <!-- ? 关键修复：仅此单元格无内边距 -->
<div class="example-element-detail"
[@detailExpand]="element === expandedElement ? 'expanded' : 'collapsed'">
<div class="example-element-diagram">
<!-- 展开区域的实际内容（如图表、详情表单等） -->
</div>
</div>
</td>
</ng-container>? 为什么有效？
Angular Material 的 mat-cell 默认继承全局 td 样式（含 padding），而 expandedDetail 行本质是占满整行的“伪单元格”，其内部已通过 @detailExpand 动画控制高度（height: 0px / height: *）。此时外层 <td> 的 padding 会强行撑开空白区域，覆盖动画的视觉效果。移除该 <td> 的 padding 后，动画收缩真正归零，缝隙自然消失。
⚠️ 注意事项与进阶建议
避免全局污染：切勿在全局 CSS 中写 .mat-table td { padding: 0; } 或类似规则，否则将破坏所有标准单元格的布局节奏。
-
优先使用 CSS 类替代内联样式（更佳实践）：
若项目规范禁止内联样式，可在组件 CSS 中定义专用类：/* compare-page.component.css */ .no-padding-cell { padding: 0 !important; }并在模板中应用：
<td mat-cell *matCellDef="let element" [attr.colspan]="..." class="no-padding-cell">
检查 overflow 与 border-collapse：
若仍有轻微错位，确认父 <table> 未被意外设置 border-collapse: separate，并确保 .example-element-detail 内部无溢出内容（可加 overflow: hidden 防止动画过渡期内容透出）。动画兼容性提示：
当前 [@detailExpand] 使用 height: * 实现自动高度展开，需确保 .example-element-detail 内容不依赖 display: flex 或 grid 的隐式高度计算——若遇高度计算异常，可改用 max-height + overflow: hidden 方案（需配合 transition: max-height）。
通过这一轻量、精准的样式干预，即可彻底解决可展开行的视觉缝隙问题，同时完全保留 Angular Material 表格的标准交互体验与设计一致性。
