таблица материалов со сложенным заголовком

Question

Привет. Я стремлюсь добиться следующей структуры в таблице материалов. До сих пор я видел несколько примеров, но я не могу этого достичь

Чего я хочу достичь:

|        |       |
|--------|-------|
| header | value |
| header | value |
| header | value |

<table >     
      <tbody><tr>
          <th>name</th>
          <td>
            value
          </td>
      </tr>

      <tr>
          <th>name2</th>
          <td>
            value2
          </td>
      </tr>
  </tbody>
</table>

когда я делаю эту реализацию, я получаю только результат ниже:

<mat-table #table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="{{key}}" *ngFor="let key of objectKeys(dataSource)">
      <mat-header-cell *matHeaderCellDef mat-sort-header> {{getData(key).toUpperCase()}} </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element[key]}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

  </mat-table>

Это результат:

| header | header | header | Header | header |
|--------|--------|--------|--------|--------|
|        |        |        |        |        |
|        |        |        |        |        |
|        |        |        |        |        |

Любая помощь приветствуется!

Answer 1

Таблица из углового материала не имеет определенного атрибута, который вы можете изменить, чтобы повернуть его так, как вы хотите.Однако это не значит, что вы не можете сделать это самостоятельно.

Вы не можете изменить положение ваших заголовков с помощью html, как в вашем примере кода, но вы можете изменить их положение просмотра с помощью css.Вот способ сделать это через flexbox:

  table.mat-table {
    display: flex;
    flex-direction: row;
  }
  .mat-table tbody{
    display:flex;
    flex-direction: row;
  }
  .mat-table tr {
    display: flex;
    flex-direction: column;
  }

Конечно, вам нужно будет сделать намного больше, чтобы он действительно выглядел хорошо, но, по крайней мере, он должен начать выглядеть так, как вы хотите.