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

<div style="width: 1000px; margin:auto; position: relative;">
  <h1>Übersicht über alle Ränge</h1>

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

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

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

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name</th>
        <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_OPFOR">{{fraction.OPFOR}}</h3>

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

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

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name</th>
        <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>