帶有堆疊頭的材料表

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;
  }

當然，你需要做更多的事情才能使它看起來很好看，但至少應該開始按你想要的方式進行。