Angular 14 数据表格超出Mat-Card范围的修复求助

核心原因 #

表格包含大量列，且单元格内的mat-form-field自带默认最小宽度，单纯添加w-100无法让表格自适应容器宽度，最终导致横向溢出。

方案1：添加横向滚动容器（最直接有效） #

给表格包裹一层滚动容器，让表格在容器内可横向滑动，不破坏原有布局：

1. 修改app-pur-pr-list-assign-com2组件的HTML，在表格外层新增容器：

<form [formGroup]="PrlnService.form">
  <!-- 新增滚动容器 -->
  <div class="table-scroll-container">
    <table class="table table-striped table-bordered w-100">
      <!-- 表格原有内容保持不变 -->
    </table>
  </div>
  <!-- 新增/删除按钮区域 -->
  <div class="row">
    <div class="d-flex justify-content-center">
      <button color="primary" mat-raised-button type="button" (click)="this.PrlnService.addPr_n()">
        <mat-icon>add</mat-icon>
        Add
      </button>
    </div>
  </div>
</form>

2. 在组件的CSS文件中添加滚动样式：

.table-scroll-container {
  overflow-x: auto;
  max-width: 100%;
  /* 可选：优化滚动条样式 */
}
.table-scroll-container::-webkit-scrollbar {
  height: 8px;
}
.table-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

方案2：压缩列宽与表单控件 #

通过设置列宽、缩小表单控件尺寸来减少表格整体宽度：

1. 给表头<th>设置固定/最小宽度：

<thead style="text-align: center;">
  <th *ngIf="false">prno</th>
  <th style="width: 50px;">No</th>
  <th style="min-width: 140px;">Descliption</th>
  <th style="width: 70px;">Price</th>
  <th style="width: 70px;">Qty</th>
  <th style="min-width: 110px;">Unit</th>
  <th style="width: 90px;">Amount</th>
  <th style="min-width: 110px;">Req date</th>
  <th style="width: 90px;">Over 1 Year</th>
  <th style="min-width: 110px;">Credit Tem Code</th>
  <th style="min-width: 90px;">Acc Code</th>
  <th style="min-width: 110px;">Sub Acc Code</th>
  <th style="width: 90px;">Action</th>
</thead>

2. 缩小表单控件的默认尺寸：

.table mat-form-field {
  font-size: 14px;
}
.table mat-form-field .mat-form-field-wrapper {
  padding-bottom: 0; /* 移除表单底部多余留白 */
}

方案3：移除冗余的Mat-Card嵌套 #

父组件中存在多层嵌套的mat-card，额外的内边距和容器约束会加剧溢出问题，可简化结构：

<mat-tab-group mat-align-tabs="start">
  <mat-tab label="BILL">
    <mat-card class="mt-2">
      <mat-card-content>
        <app-pur-pr-list-assign-com2 #c2></app-pur-pr-list-assign-com2>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Upload">
    <mat-card>
      <app-pur-pr-list-assign-com-upload #comupload></app-pur-pr-list-assign-com-upload>
    </mat-card>
  </mat-tab>
</mat-tab-group>

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