如何在页面上放置垂直标签

Question

我在该表上有一个表名和标题，但我想在表的左侧但垂直放置一个标签，该怎么做？

到目前为止，这是我的表格代码

<div class="ibox-content">
      <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th style="text-align: center;" colspan="29">DESTINO</th>
          </tr>
          <tr>
            <th *ngFor="let val of table_headers">{{val}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let val of array; let i = index">
            <td *ngFor="let item of val; let j = index" [class.coloured]="i === j">{{item}}</td>
          </tr>
        </tbody>
      </table>
    </div>

Answer 1

具有一个跨您所有行的单元格。使用CSS旋转它。

<tr *ngFor="let val of array; let i = index">
    <td *ngIf="i === 0" [rowSpan]="array.length" class="vertical-label">vertical</td>
    <td *ngFor="let item of val; let j = index" [class.coloured]="i === j">{{item}}</td>
</tr>

.vertical-label {
    transform: rotate(-90deg);
}