Angular Material Table Width 100%

…衆ロ難τιáo~ 提交于 2019-12-13 17:19:09

问题


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>

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

attaching the screenshot for the table..

Screenshot of the table

来源:https://stackoverflow.com/questions/52746555/angular-material-table-width-100

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!