Стиль Вложенный мат-стол - PullRequest
Новая
       16

Стиль Вложенный мат-стол

0 голосов
/ 06 апреля 2020

Я сейчас пытаюсь стилизовать вложенные таблицы матов в Sngular 8.

У меня проблема с более глубокой: я вижу, что нет содержимого, а заголовки столбцов вертикальные, в то время как результат ожидаемого результата такой же, как в фигура Кроме того, данные внутренней строки не отображаются вообще (я думаю, из-за неправильного стиля).

enter image description here

Мой HTML код похож на это: 

<table mat-table [dataSource]="dataSource" style="width: fit-content; padding: 0">

    <ng-container matColumnDef="periodiCicli" sticky>
       <!-- Table with no header that gives no problem-->
    </ng-container>

    <!--Dinamically create n custom inner tables-->
    <ng-container *ngFor="let item of list" matColumnDef="myColumn" sticky>
       <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{myVariable}}</th>
       <td mat-cell *matCellDef class="customCell">
          <my-inner-table [var1]="uprod.cicliProduzione" [var2]="uprod.cicliRiscontrati"...>
          </my-inner-table>
       </td>
    </ng-container>

   <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;" style="height: fit-content; width: fit-content;"></tr>
</table>

Мне удалось заставить его работать, но это был беспорядок (и я также потерял класс mian css). Мой класс под названием «customCell»: 

.customCell{
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    margin-top: 1px;
    margin-bottom: 1px;
    height: 23px;
    width: fit-content;
    border-right: 1.5px gray solid;
    }

Может кто-нибудь попросить помочь мне получить результат, как на картинке? Я ищу решение css, но приветствуются и другие.

...