Angular Material Table Column align

Question

I am using Angular Material Tables for my Project. I used some CSS in order to make the Table horizontally scrollable, whenever the content in the table would not be displayed anymore, which works just fine. But which occurs now is, that the first table column has now a very unusual width, when viewed in full screen mode (the whole table is visible).

The Table:

<div class="example-container mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
        <ng-container matColumnDef="Investor">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Firm </th>
          <td mat-cell *matCellDef="let element"> {{element.investor}} </td>
        </ng-container>

        <ng-container matColumnDef="Location">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Firm Eaum ($m) </th>
          <td mat-cell *matCellDef="let element"> {{element.location}} </td>
        </ng-container>

        <ng-container matColumnDef="Date">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Shareholding in BAWAG </th>
          <td mat-cell *matCellDef="let element"> {{element.date}} </td>
        </ng-container>

        <ng-container matColumnDef="Comment">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Contact Name </th>
            <td mat-cell *matCellDef="let element"> {{element.comment}} </td>
        </ng-container>


        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    <mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>

The CSS:

  .mat-row:hover {
    background-color: rgb(228, 228, 228);
  }

  .example-container {
    display: block;
    width: 100%;
    overflow-x: auto;

  .mat-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    display: table;
    border-collapse: collapse;
    margin: 0px;
}

.mat-row,
.mat-header-row {
    display: table-row;
}

.mat-cell,
.mat-header-cell {
    word-wrap: initial;
    display: table-cell;
    padding: 0px 5px;
    line-break: unset;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}
  }

How can I overcome this problem?

Emilien · Accepted Answer · 2020-06-17 13:26:50Z

2

Maybe you can try with the first example of Material Table (using display flex) https://material.angular.io/components/table/examples. With that, all your cells wil have the same width.

<mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <ng-container matColumnDef="Investor">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Firm </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.investor}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Location">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Firm Eaum ($m) </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.location}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Date">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Shareholding in BAWAG </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.date}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Comment">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Contact Name </mat-header-cellh>
    <mat-cell *matCellDef="let element"> {{element.comment}} </mat-cell>
  </ng-container>

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

answered Jun 17, 2020 at 13:26

Emilien

2,7534 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaspa79 Over a year ago

if I include <mat-cell> directly instead of <td mat-cell> I get unknown element, any idea why?

Collectives™ on Stack Overflow

Angular Material Table Column align

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related