首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >角度材质表宽度100%

角度材质表宽度100%
EN

Stack Overflow用户
提问于 2018-10-11 02:23:02
回答 3查看 14.1K关注 0票数 2

我使用的是角材料卡内的材料表。下面是我的代码:

代码语言:javascript
运行
复制
<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%

附加表格屏幕截图

EN

Stack Overflow用户

发布于 2019-12-24 01:58:06

我知道这个问题很老,但我也有同样的问题,这对我很有效。

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

代码语言:javascript
运行
复制
table.mat-table {
    display: table;
}
票数 5
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52746555

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档