<div class="horizontal-scroll">
  <table class="table table-hover">
    <thead>
    <tr class="black-muted-bg">
      <th class="browser-icons"></th>
      <th>Browser</th>
      <th class="align-right">Visits</th>
      <th class="table-arr"></th>
      <th class="align-right">Purchases</th>
      <th class="table-arr"></th>
      <th class="align-right">%</th>
      <th class="table-arr"></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of metricsTableData" class="no-top-border">
      <td><img src="{{ ( item.image | baAppPicture ) }}" width="20" height="20"></td>
      <td ngClass="nowrap">{{item.browser}}</td>
      <td class="align-right">{{item.visits}}</td>
      <td class="table-arr"><i [ngClass]="{'icon-up': item.isVisitsUp, 'icon-down': !item.isVisitsUp }"></i></td>
      <td class="align-right">{{item.purchases}}</td>
      <td class="table-arr"><i [ngClass]="{'icon-up': item.isPurchasesUp, 'icon-down': !item.isPurchasesUp }"></i></td>
      <td class="align-right">{{item.percent}}</td>
      <td class="table-arr"><i [ngClass]="{'icon-up': item.isPercentUp, 'icon-down': !item.isPercentUp }"></i></td>
    </tr>
    </tbody>
  </table>
</div>
