角材料表宽度 100%答案

【问题标题】：Angular Material Table Width 100%角材料表宽度 100%
【发布时间】：2022-01-28 15:36:34
【问题描述】：

我在角材料卡内使用材料表。这是我的代码：

<mat-card style="margin: 5px;font-family:Arial, Helvetica, sans-serif!important;font-size:10px !important;" class="mat-elevation-z15"
  fxFlex>
  <mat-card-content fxLayout="column" fxLayoutAlign="space-between" fxFlex>
    <h4>Incidents</h4>
    <mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Number</th>
        <td mat-cell *matCellDef="let element">{{ element.number }}</td>
      </ng-container>
      <ng-container matColumnDef="desc">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
        <td mat-cell *matCellDef="let element">{{ element.desc }}</td>
      </ng-container>
      <ng-container matColumnDef="assn_group">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Group</th>
        <td mat-cell *matCellDef="let element">{{ element.assn_group }}</td>
      </ng-container>
      <ng-container matColumnDef="product">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>
        <td mat-cell *matCellDef="let element">{{ element.product }}</td>
      </ng-container>
      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
        <td mat-cell *matCellDef="let element">{{ element.state }}</td>
      </ng-container>
      <ng-container matColumnDef="opened">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Opened</th>
        <td mat-cell *matCellDef="let element">{{ element.opened }}</td>
      </ng-container>
      <ng-container matColumnDef="sla_group">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>SLA Group</th>
        <td mat-cell *matCellDef="let element">{{ element.sla_group }}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </mat-table>


  </mat-card-content>
</mat-card>

并且表格宽度设置为 100%。它在代码中得到了完全扩展，但列没有完全使用 100% 的表格宽度

附表截图

【问题讨论】：

看看：stackoverflow.com/questions/48684560/…
@ChrisM。出于某种原因，即使在我的代码中使用了 css，我也看不出表格的显示方式有什么不同
我通过将 fxFlex 添加到单元格标题和单元格来修复它
我们应该在哪里添加 fxFlex？你能提供一个样品吗？我添加了一个属性，但它不起作用

标签： angular

【解决方案1】：

我知道这个问题很老，但我遇到了同样的问题，这对我有用。

mat-table包含一个类名mat-table可以指定一些样式，添加“table”的属性，这种情况下可以添加一些样式

table.mat-table {
    display: table;
}

【讨论】：

【解决方案2】：

适合我的风格如下：

table-layout: fixed;
width: 100%;
display: table;

【讨论】：

【解决方案3】：

添加实用程序类确实对我有用。

.w-100 {
 width: 100%;
}

<table mat-table class="w-100">
        <ng-container matColumnDef="name">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>Name</th>
            <td *matCellDef="let row" mat-cell>{{row.name}}</td>
          </ng-container>
    ...
</table>

【讨论】：

不幸的是它不起作用
@Kainka 你能分享代码 sn-p 吗？所以我可以帮你。