Overflow in Material Table

Question

Good morning, I have a table with material table and I need that when the column data exceeds its size, it generates a scroll with overflow. It’s been a while since I’ve been looking and trying and found nothing. How can I overflow? So far the code is like this:

Table:

<table mat-table [dataSource]="dataSource" matSort>

                    <ng-container matColumnDef="id">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
                        <td mat-cell *matCellDef="let config"> {{config.id}} </td>
                    </ng-container>

                    <ng-container matColumnDef="descricao">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Descricao</th>
                        <td mat-cell *matCellDef="let config" class="descricao"> {{config.planta}} </td>
                    </ng-container>

                    <ng-container matColumnDef="dados">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Dados</th>
                        <td mat-cell *matCellDef="let config"> {{config.dados}} </td>
                    </ng-container>

                    <ng-container matColumnDef="classe">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Classe</th>
                        <td mat-cell *matCellDef="let config" > {{config.classe}} </td>
                    </ng-container>

                    <ng-container matColumnDef="server">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Server</th>
                        <td mat-cell *matCellDef="let config"> {{config.server}} </td>
                    </ng-container>

                    <ng-container matColumnDef="opcoes">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Opções</th>
                        <td mat-cell *matCellDef="let element">
                        <button mat-raised-button color="primary" tooltip="Alterar" ><mat-icon>create</mat-icon></button>&nbsp;
                        <button mat-raised-button color="warn" tooltip="Excluir" ><mat-icon>delete_sweep</mat-icon></button>
                        </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="table-row"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" ></tr>
                </table>

CSS:

body { 
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}
.mat-form-field {
  font-size: 14px;
  width: 100%;
}
table {
  width: 100%;
  overflow: auto;
}
td {
  overflow: auto;
  width:auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

tr.mat-footer-row,
tr.mat-row {
  border: 1px solid #e7e7e7;
  font-weight: bold;
  height: 20px !important;
}