CODEWITHSUNDEEP
cssangularangular-material
benni0108
benni0108

Reputation: 85

Angular Material Table Column align

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? enter image description here

Upvotes: 0

Views: 4080

Answers (1)

Emilien
Emilien

Reputation: 2761

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>

Upvotes: 2

Related Questions