opt-cc/static/src/app/pub/rank-overview/rank-overview.component.html

<div class="rank-overview-container">
  <h1>{{'public.ranks.headline' | translate}}</h1>

  <div class="column-container pull-left">
    <h3 [style.color]="fraction.COLOR_ARF">{{fraction.ARF}}</h3>

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

      <ng-container matColumnDef="picture">
        <td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
      </ng-container>

      <ng-container matColumnDef="name">
        <td mat-cell *matCellDef="let element"> {{element.name}}</td>
      </ng-container>

      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
    </table>
  </div>

  <div class="column-container pull-right">
    <h3 [style.color]="fraction.COLOR_SWORD">{{fraction.SWORD}}</h3>

    <table mat-table [dataSource]="ranksOpfor" class="pull-right mat-elevation-z8">

      <ng-container matColumnDef="picture">
        <td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
      </ng-container>

      <ng-container matColumnDef="name">
        <td mat-cell *matCellDef="let element">{{element.name}}</td>
      </ng-container>

      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
    </table>
  </div>
</div>