Angular Material Table 不占用全部宽度

Question

我有 Angular Material Table。它不能正常工作。它不占用整个宽度。我怎么能强制它占据整个宽度？

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>No.</th>
    <td mat-cell *matCellDef="let element">{{ element.position }}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef>Weight</th>
    <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef>Symbol</th>
    <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

CSS:

table {
  width: 100%;
}

Answer 1

(应该是评论稍后删除)

你试过了吗：

table { width: 100%!important; } ？

Answer 2

如您所见，它与 Table | Angular Material 文档中指定的一样，因此它占据了整个宽度。您可能有一个父 div 或宽度较小属性的容器，因此您的 table 没有占用所有 space。如果您不想使用 important! 标签强制执行它，请尝试在您的 HTML 代码中进行调查。

您也可以尝试使用 table Tables with display: flex | Angular Material 的 flex 版本，但是它与 table 组件的某些本机功能不兼容。

Angular Material Table 不占用全部宽度

Angular Material Table doesn't take all width

html

css

angular-material

angular