AngularMaterial表格不占满整个宽度
可以通过设置CSS样式或使用MatTableModule中的属性来解决此问题。
- 设置CSS样式：
在组件的CSS文件中添加以下样式：
.mat-table { width: 100%; }
或者
.mat-table { display: block; }
- 使用MatTableModule中的属性：
MatTableModule中有一个属性stickyHeader，可以使表头固定，占满整个宽度，将其设置为true即可解决此问题。
示例代码：
在app.module.ts中导入MatTableModule
import { MatTableModule } from '@angular/material/table';
@NgModule({ imports: [ MatTableModule ] })
在组件中的HTML文件中添加以下代码：
| Column 1 | {{element.column1}} |
|---|
在组件的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