角物料台宽度100％ [英] Angular Material Table Width 100%

问题描述

我在有角度的材料卡中使用材料表.这是我的代码:

I'm using material table inside angular material card. Here is my code:

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

And the table width set to 100%. it gets extended fully in the code but the columns not fully using the 100% of the table width

附加表格屏幕截图

推荐答案

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

I know that this question is old, but I had the same problem, and this worked for me.

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

mat-table contains a class name mat-table where you can specify some styles, adding the property of "table", you can add some style in this case

table.mat-table {
    display: table;
}

这篇关于角物料台宽度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！