CODEWITHSUNDEEP
htmlcssangularangular-material
denisiulian
denisiulian

Reputation: 273

Angular Material Table doesn't take all width

I have the Angular Material Table. It doesn't work properly. It' doesn't take the whole width. How could I force it to take the entire width?

<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%;
}

Upvotes: 0

Views: 3513

Answers (2)

Sandra
Sandra

Reputation: 21

As you have it, it is as specified in the Table | Angular Material documentation so that it takes the entire width. You might have a parent div or container with a smaller width property and therefore your table is not taking all the space. If you don't want to force it with the important! tag, try to investigate that in your HTML code.

You can also try to use the flex version for the table Tables with display: flex | Angular Material nevertheless it is not compatible with some native features for the table component.

Upvotes: 2

Dev
Dev

Reputation: 200

(should be a comment will delete later)

did you try:

table { width: 100%!important; } ?

Upvotes: 0

Related Questions