CODEWITHSUNDEEP
htmlcssangularhtml-tableangular-material
Ryan Sperzel
Ryan Sperzel

Reputation: 905

Can't set height on Angular Material table.. height overflows container

I'm using an Angular Material table and having (a lot of) trouble forcing the table to be a certain height. Right now the table is overflowing its container when there's enough data given to it. I thought if I gave the container div a fixed height (I gave it a fixed height and max-height actually), that I could then give its child something like height: 500px;. Obviously that's not working - the table element is not listening to any height I give it.

I've seen it recommended to just give the container a height and overflow: auto; which does ultimately contain the table inside the container, but the <th> is not fixed at the top and scrolls out of sight which is not the behavior I'm looking for. I would like to put a scrollbar on the <tbody> and be able to scroll that, but keep that scroll separated from the category names in the <th> (that should remain fixed at the top).

Is this just strange HTML table behavior? I'm not too familiar with HTML tables but expected them to behave like all other HTML elements. How can I fit the table element into its container without scrolling the entire thing?

You can find my code to render the table below:

// table.component.html

  <div class="table-container">
    <table [dataSource]="items" class="table" mat-table>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td  mat-cell *matCellDef="let item"> {{item.id}} </td>
      </ng-container>

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

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

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


// table.component.scss

.table-container {
  width: 100%;
  min-width: 445px;
  max-width: 1459px;
  height: 500px;
  max-height: 500px;
  border: 1px solid black;
  border-radius: 6px;
  box-sizing: border-box;
}

.table {
  width: 100%;
  height: 500px;
  max-height: 500px;
  line-height: 19px;
  font-size: 5.5px;
  border-collapse: collapse;

  td {
    border-bottom: none;
    padding: 30px;
  }

  th {
    border-bottom: 1px solid #A4B8CA;
    padding: 30px;
  }
}

Upvotes: 4

Views: 18594

Answers (5)

Bsher Rahmoun
Bsher Rahmoun

Reputation: 61

You can put the table element inside a wrapper/div:

<div id="table-container">
   <table mat-table .....>
   </table>
</div>

Then style the wrapper with desired height:

#table-container {
  height: 600px;
  overflow: auto; //--> if you want to make it scroll-able 
}

Upvotes: 0

user6600549
user6600549

Reputation:

You just need to set the table height.

and dont forget the sticky :

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

in your table.

<div class="table-container">
    <table [dataSource]="items" class="table" mat-table>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td  mat-cell *matCellDef="let item"> {{item.id}} </td>
      </ng-container>

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

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

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

.scss file

table{
  min-height: 500px;
  max-height: 500px;
  overflow: auto !important;
}

Upvotes: 2

Viktor Ivanov
Viktor Ivanov

Reputation: 159

Just try to replace following tags
<table> to <mat-table>
<th mat-header-cell> to <mat-header-cell>
<td mat-cell> to <mat-cell>

Then add style 

.mat-table {
  overflow: auto;
  max-height: 270px;
}

Upvotes: 0

Damien
Damien

Reputation: 1620

I would remove the height and keep max-height and add overflow to scroll if needed.

    .table-container {
      max-height: 500px;
      overflow: auto;
      ...
    }

   .mat-header-row {
      position: sticky;
      top: 0;
      z-index: 100;
  }

Upvotes: 0

namanh11611
namanh11611

Reputation: 67

I think you should use position for table-container and thead

.table-container {
    position: relative;    
}
thead {
    position: absolute;
    top: 0;
}

Upvotes: 0

Related Questions