How to create a horizontally oriented table with Angular Material (mat-table

Question

I'm using angular material 8.2.3 for my site. But currently I'm stuck with a seemingly easy problem. I want to order a table horizontally instead of vertically.

My table consists of only two columns. Here's the code:

<table mat-table [dataSource]="items" class="mat-elevation-z8 table-hover">

  <ng-container matColumnDef="percent">
    <th mat-header-cell *matHeaderCellDef> %</th>
    <td mat-cell *matCellDef="let items">{{items.percent}}</td>
  </ng-container>

  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> val. </th>
    <td mat-cell *matCellDef="let items">{{items.value}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

The resulting table looks like this:

|------|------|
|  %   | val. |
|------|------|
|   1  |   5  |
|   2  |   4  |
|   3  |   3  |

But what I want is this:

|------|------|------|------|
|  %   |   1  |   2  |   3  |
|------|------|------|------|
| val  |   5  |   4  |   3  |
|------|------|------|------|

What do I have to do to achieve this?

Answer 1

我预计有一个隐藏的技巧或属性可以mat-table在某个方向上渲染表格，但显然没有。

由于使用一些 CSS 魔法的建议解决方案并没有真正带来预期的结果，我决定在没有材料的情况下对表格进行编码，如下所示：

<table style="width:100%; margin-top: 10pt;">
  <tr>
    <th>Percent:</th>
    <td class="right" *ngFor="let i of items">
      {{i.percent}} %
    </td>
  </tr>
  <tr>
    <th>Value:</th>
    <td class="right" *ngFor="let i of items">
      {{i.value}}
    </td>
  </tr>
</table>

使用普通的桌子，水平布局非常容易实现。我现在所要做的就是一些 CSS 使其看起来像我拥有的​​其他表格。

还是要谢谢你的帮助。要知道，没有简单的方法可以做到这一点，这mat-table也是一个宝贵的教训。