时间戳

首页 > 解决方案 > 如何将外部边框应用于有角材料的表格？

angular - 如何将外部边框应用于有角材料的表格？

问题描述

我正在尝试这种方式，但它没有用

模板是：

<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直接应用于表格标签

标签： angularangular-material

解决方案

这里发生的是，由于&组合，您正在隐藏边框overflow: hiddenborder-collapse: collapse

看看我的例子：https ://stackblitz.com/edit/angular-n1n34j

推荐阅读