I created a table in angular with angular material and added random data to it, but the size of the rows is too big and I don't know what could be interfering, I just want it to look normal. I give you a picture of how it looks and the code. enter image description here
HTML:
<table *ngIf="dataSource.length>0" mat-table [dataSource]="dataSource" class="mat-elevation-z8 ">
<ng-container matColumnDef="Artículo/Servicio">
<th mat-header-cell *matHeaderCellDef> Artículo/Servicio</th>
<td mat-cell *matCellDef="let element">{{element.article}}</td>
</ng-container>
<ng-container matColumnDef="Estado">
<th mat-header-cell *matHeaderCellDef>Estado</th>
<td mat-cell *matCellDef="let element">{{element.status}}</td>
</ng-container>
<ng-container matColumnDef="Fecha de Ingreso">
<th mat-header-cell *matHeaderCellDef> Fecha de Ingreso</th>
<td mat-cell *matCellDef="let element">{{element.startDate}}</td>
</ng-container>
<ng-container matColumnDef="Fecha de Entrega">
<th mat-header-cell *matHeaderCellDef>Fecha de Entrega</th>
<td mat-cell *matCellDef="let element">{{element.asOfDate}}</td>
</ng-container>
<ng-container matColumnDef="acciones">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<div fxLayout="row" fxLayoutAlign="space-around">
<button mat-mini-fab color="primary">
<mat-icon>visibility</mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
CSS:
table{
width: 80%;
margin-left: 200px;
margin-top: 20px;
}
.table-container{
height: auto;
}