Как я могу применить границы outisde к таблице из angular материала?

Question

Я пытаюсь таким образом, но это не сработало

Шаблон:

<table mat-table [dataSource]="dataSourceListadoEstados" class="mat-table-riesgo-generico">
      <ng-container matColumnDef="descripcion_estado">
        <th mat-header-cell *matHeaderCellDef> DESCRIPCION </th>
        <td mat-cell *matCellDef="let data">
          {{data.descripcion}}
        </td>
      </ng-container>
      <ng-container matColumnDef="clase_estado">
        <th mat-header-cell *matHeaderCellDef> CLASE DE ESTADO </th>
        <td mat-cell *matCellDef="let data"> {{data.idClaseEstado.descripcion}} </td>
      </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

css, который я применяю к таблице,

table.mat-table {
    border-spacing: 0;
}
.mat-table-generico {
    width: 100%;
    border: 3px solid black !important;
    border-radius: 8px !important;
    border-collapse: collapse;
    overflow: hidden;
}

Я применяю класс mat-table-generico непосредственно к тегу таблицы

Answer 1

Здесь происходит то, что вы скрываете границу из-за комбинации overflow: hidden & border-collapse: collapse

Посмотрите на мой пример здесь: https://stackblitz.com/edit/angular-n1n34j