Chris's questions

Eu gostaria de criar uma tabela que se parece com isso usando css e html. Não faço ideia de como proceder para resolver o problema.

Sou capaz de criar a barra de progresso com divs retangulares simples e css. Também sou capaz de fazer a tabela com as descrições. Não tenho certeza de como criar a linha com lados angulares. Qualquer ajuda seria ótimo.

Estou fazendo isso em Angular, mas não acho que o framework usado seja importante para a solução.

<table>
  <tr>
    <td colspan="3">
      <div class="progress" *ngIf="screenerStats$ | async as screenerStats">
        <div
          class="progress-bar progress-bar-success"
          role="progressbar"
          [attr.aria-valuenow]="screenerStats?.percentScreened"
          [style.width.%]="screenerStats?.percentScreened"
          aria-valuemin="0"
          aria-valuemax="100"
          [matTooltip]="
            (screenerStats?.screened | number) + ' screened by you.'
          "
        >
          <span>{{ screenerStats?.screened | number }} Completed</span>
        </div>
        <div
          class="progress-bar progress-bar-info"
          role="progressbar"
          [attr.aria-valuenow]="screenerStats?.percentAvailable"
          [style.width.%]="screenerStats?.percentAvailable"
          aria-valuemin="0"
          aria-valuemax="100"
          [matTooltip]="
            (screenerStats?.available | number) +
            ' available for screening by you.'
          "
        >
          <span>{{ screenerStats?.available | number }} Available </span>
        </div>
        <div
          class="progress-bar progress-bar-warning"
          role="progressbar"
          [attr.aria-valuenow]="screenerStats?.percentUnavailable"
          [style.width.%]="screenerStats?.percentUnavailable"
          aria-valuemin="0"
          aria-valuemax="100"
          [matTooltip]="
            (screenerStats?.unavailable | number) +
            ' unavailable for screening by you (due to sufficient screening by others).'
          "
        >
          <span>{{ screenerStats?.unavailable | number }} Unavailable</span>
        </div>
      </div>
    </td>
  </tr>
 <tr>
   <th>{{ screenerStats?.percentScreened | number }} Completed</th>
   <th>{{ screenerStats?.percentAvailable | number }} Available</th>
   <th>{{ screenerStats?.percentUnavailable | number }} Unavailable</th>
 </tr>
 <tr>
   <td>{{ screenerStats?.screened | number }} studies screened by you.</td>
   <td>{{ screenerStats?.available | number }} studies available for screening by you.</td>
   <td>{{ screenerStats?.unavailable | number }} studies unavailable for screening by you (due to suffucient screening by others).</td>   
 </tr>
</table>