Vertical stretch of a table, without moving its content - css

Question

despite the fact that I'm working on a project using Angular and angular material, the solution might be pure CSS.
So I have a table with very few elements in it 2 or 3 rows for the moment and I want it to be at a fixed height (let's say 700px). I tried setting the height of the table to 700px, BUT, the content of my table is stretching to fill it, so if I have two rows, they will have top and bottom padding to fille the table. therefore the total height of each of my two cells is 350px (if my table body is 700px).
Another problem I have is that angular material doesn't have vertical separators for each column. Therefore I have to set a border to my cells, but if my cells don't take all the height of the table, I don't have a full vertical line, it ends at my last row.
I tried playing around with flex attributes but nothing worked.
This is basicaly what I have for the moment:
<div id="main-table">
<div id="table-container">
<table id="master" mat-table [dataSource]="projects">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let project" class="py-0 px-0">
<button mat-button (click)="getVersionsList(project);" class="cell-button"> {{project.name}} </button>
</td>
</ng-container>
<!-- Description Column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> Description </th>
<td mat-cell *matCellDef="let project" class="py-0"> {{project.description}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<!-- other stuff -->
</div>
.mat-header-cell, .mat-cell{
padding: 12px;
}
.py-0 { // padding on Y axis 0
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.px-0, .cell-button { // padding on X axis 0
padding-left: 0 !important;
padding-right: 0 !important;
}
.cell-button{
width: 100%;
padding: 6px 0;
}
.mat-row {
height: auto;
}
.mat-cell{
//padding-top: 16px;
//padding-bottom: 16px;
//border-right: rgba(0,0,0,.12) 1px solid;
border-bottom: 0;
}
My CSS is quite empty since nothing was working.
Thanks for helping.

Answer 1

I had the same problem because Angular Material Table is not responsive at all. So while searching for a solution, I came up with this: https://ampersandacademy.com/tutorials/angular-material/scrollable-table-in-angular-material
I'm using only css (instead o scss), so here's my code for it:
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.table-responsive .mat-table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
margin: 0px;
}
.table-responsive .mat-row, .table-responsive .mat-header-row {
display: table-row;
}
.table-responsive .mat-cell, .table-responsive .mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 5px;
line-break: unset;
width: auto;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
Just add it to your styles.css, make a div surrounding your table, and add the "table-responsive" class
<div class="mat-elevation-z1 table-responsive">
<table mat-table [dataSource]="dataSource">
...
</table>
</div>
But there's a problem: this doesn't work well if you have a mat-paginator for your table. I did a workaround by setting him outside the "table-responsive" div, which worked pretty well for me.