<div *ngIf="datas?.chart">
  <h2 class="ion-padding">
    {{ datas?.chart?.title }}
  </h2>
  <p class="ion-padding-horizontal" *ngIf="datas?.chart?.totalSubmissions">
    {{ 'FRMELEMNTS_MSG_ASSESSMENTS_DONE' | translate }}-{{ datas?.chart?.totalSubmissions }}
  </p>

  <ion-card
    (click)="isOpenIndex = isOpenIndex == i ? -1 : i"
    class="expansionPanel ion-margin"
    *ngFor="let item of datas?.chart?.domains; let i = index"
  >
    <div class="_flex-box _justify-content-space-between ion-padding" >
      <h4 style="flex: 1" class="ion-text-wrap">{{ item?.domainName }}</h4>
      <ion-icon *ngIf="!(isOpenIndex == i)" name="arrow-down" class="ion-padding-horizontal" ></ion-icon>
      <ion-icon *ngIf="isOpenIndex == i" name="arrow-up" class="ion-padding-horizontal"></ion-icon>
    </div>
    <div *ngIf="isOpenIndex == i" class="ion-padding">
      <table class="table-view">
        <tr>
          <th></th>
          <th *ngFor="let head of datas?.chart?.heading">
            {{ head }}
          </th>
        </tr>
        <tr *ngFor="let criteria of item.criterias">
          <td class="ion-text-wrap level-name">{{ criteria?.name }}</td>
          <td class="level-score" *ngFor="let level of criteria?.levelsWithScores">
            <p>{{ level.level }}</p>
            <p>{{ level.score }}</p>
          </td>
        </tr>
      </table>
    </div>
  </ion-card>

</div>

./expansion-table.component.scss

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  background:white
}

th,
td {
  text-align: left;
  padding: 12px 4px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
.expansionPanel {
  border-radius: 10px;
  width: 100%;
  margin: 16px 0px !important;
  padding: 0px !important;
}

.assess {
  flex: 0;
  //   padding: 2px 2.2px;
  text-align: -webkit-center;
}

.level-name{
  text-align: left;
}

.level-score{
  text-align: center;
}

.table-view{
  width:100%
}

.table-view td {
  border-bottom: 1px solid #ddd;
}

.table-view th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  text-align:center;
  border-bottom: 1px solid #ddd;
}