Question

使用带角物料卡内的物料表。这是我的代码

<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％

附上表格的屏幕截图。

Screenshot of the table

Answer 1

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

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

table.mat-table {
    display: table;
}

角物料台宽度100％

1 个答案: