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

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

带堆叠头的物料台

1 个答案: