angular table material width

Viewed 29

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;
    }
0 Answers
Related