Angular mat-table单元格内卡片如何撑满至表格边缘消除多余内边距

问题原因 #

Angular Material的mat-cell组件默认内置16px左右内边距，即使给内部卡片设置width:100%，也会被单元格的内边距限制，无法延伸到表格边缘。

问题表现参考：

实现步骤 #

1. 重置单元格默认内边距 #

依托你当前表格已有的-card自定义类，定向重置该表格下的单元格内边距，不会影响项目中其他mat-table样式：

/* 移除单元格、表头的默认内边距 */
.-card .mat-cell,
.-card .mat-header-cell {
  padding: 0 !important;
}

/* 将行间距设置在mat-row上，替代原卡片的下外边距 */
.-card .mat-row {
  padding-bottom: 16px;
}

2. 调整卡片样式 #

补充盒模型规则，移除多余外边距，保证卡片完全填充单元格可用空间：

.card{
    background: #FFFFFF;
    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.14), 0px 1px 8px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 0; /* 移除原有下外边距，避免出现双重间距 */
    width: 100%;
    box-sizing: border-box; /* 确保卡片内边距不会导致宽度超出单元格 */
}

你之前写在标签上的行内样式style="width:100%;padding: 16px 16px 16px 16px !important;"可以直接删掉，样式统一在css类里维护即可。

可选定向修改方案 #

如果不需要整列单元格都移除内边距，仅需要放置卡片的单元格撑满，可以单独给对应单元格加自定义类定向调整：

<mat-cell class="cell-no-padding" *matCellDef="let model">
  <div class="card">
    <div fxLayout="row">
      DATA TEST
    </div>
  </div>
</mat-cell>

对应样式：

.cell-no-padding {
  padding: 0 !important;
}

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