带堆叠头的材料表答案

【问题标题】：material table with stacked header带堆叠头的材料表
【发布时间】：2019-05-23 07:33:59
【问题描述】：

您好，我希望在材料表上实现以下结构。到目前为止，我已经看到了一些示例，但我无法做到这一点

我想要达到的目标：

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

感谢任何帮助！

【问题讨论】：

标签： javascript angular angular-material-7 angular-material-table

【解决方案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;
  }

当然，您需要做更多的工作才能让它看起来不错，但是，它至少应该开始看起来像您想要的那样。

【讨论】：

“谢谢，帮了大忙！”