可以通过设置CSS样式或使用MatTableModule中的属性来解决此问题。

1. 设置CSS样式：

在组件的CSS文件中添加以下样式：

.mat-table { width: 100%; }

或者

.mat-table { display: block; }

2. 使用MatTableModule中的属性：

MatTableModule中有一个属性stickyHeader，可以使表头固定，占满整个宽度，将其设置为true即可解决此问题。

示例代码：

在app.module.ts中导入MatTableModule

import { MatTableModule } from '@angular/material/table';

@NgModule({ imports: [ MatTableModule ] })

在组件中的HTML文件中添加以下代码：

在组件的CSS文件中添加以下样式：

.mat-table { width: 100%; }

或者在@NgModule添加以下代码：

imports: [ MatTableModule ], // 使表头固定 encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { provide: MAT_TABLE_DEFAULT_OPTIONS, useValue: { stickyHeader: true, // 如果需要固定列，可以设置stickyColumn属性 stickyColumn: false, // 是否启用无限滚动 useInfiniteScroll: false, // 是否启用增量渲染（当数据集非常大时，可以加速表格的加载） incrementalRows: 100, // 允许MAT_TABLE_DEFAULT_OPTIONS