Angular v15：如何在表格中居中带mat-select的表单字段并移除底部间隙

问题1：表格中居中包含mat-select的表单字段 #

要让表格里的mat-form-field（包含mat-select）居中，可通过以下方式实现：

1. 设置表格单元格对齐
   给承载表单字段的<td>标签添加文本居中样式，确保单元格内内容整体居中：

<td style="text-align: center;">
  <mat-form-field appearance="outline">
    <mat-label>Favorite food</mat-label>
    <mat-select>
      @for (food of foods; track food) {
        <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
      }
    </mat-select>
  </mat-form-field>
</td>

2. 优化表单字段宽度
   如果mat-form-field默认占满单元格宽度，视觉上会显得松散，可设置其宽度自适应内容：

<mat-form-field appearance="outline" style="width: fit-content;">
  <!-- 表单内容 -->
</mat-form-field>

问题2：移除表单字段的底部间隙 #

默认的mat-form-field带有底部外边距，结合表格布局会产生多余间隙，可通过以下方式移除：

1. 清除表单字段的底部外边距
   给mat-form-field添加内联样式，消除默认的底部间距：

<mat-form-field appearance="outline" style="margin-bottom: 0;">
  <mat-label>Favorite food</mat-label>
  <mat-select>
    @for (food of foods; track food) {
      <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
    }
  </mat-select>
</mat-form-field>

2. 全局/组件级批量修改
   若需要批量处理，可在组件样式（配合::ng-deep）或全局样式文件中添加规则：

/* 组件内样式 */
::ng-deep mat-form-field.appearance-outline {
  margin-bottom: 0;
}

/* 全局样式文件（如styles.css） */
mat-form-field.appearance-outline {
  margin-bottom: 0;
}

3. 调整表格单元格内边距
   若仍有间隙，可同时修改表格单元格的底部内边距：

<td style="padding-bottom: 0;">
  <mat-form-field ...>...</mat-form-field>
</td>

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