时间戳

首页 > 解决方案 > 带堆叠头的材料表

javascript - 带堆叠头的材料表

问题描述

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

我想要达到的目标：

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

任何帮助表示赞赏！

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

解决方案

角度材质的表格没有特定属性，您可以更改它以按照您想要的方式旋转它。然而，这并不意味着你不能自己做。

您不能像在代码示例中那样通过 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;
  }

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

推荐阅读