While working on a project using Angular and Angular Material, I have realized that the solution might actually lie in pure CSS.
The issue I'm facing is with a table that currently has only 2 or 3 rows. I want this table to have a fixed height of 700px. However, when I set the height of the table to 700px, the content within it stretches to fill the space. This results in top and bottom padding being added to each row to fill the table, causing each cell's total height to be 350px (assuming the table body is 700px).
Furthermore, Angular Material lacks vertical separators for columns. To work around this, I need to apply borders to my cells. But if the cells do not occupy the full height of the table, the vertical line ends at the last row creating an incomplete look.
I've attempted to use flex attributes but without success.
This is what I currently have:
<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>
<!-- additional content -->
</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 remains minimal as nothing seemed to work effectively.
Any assistance will be greatly appreciated.