在 html 和 css 中绘制表格内的倾斜线

我想创建一个表格，看起来像这样使用css和html.我不知道该如何着手解决这个问题.

我可以用简单的矩形div和css创建进度条.我还可以制作带有描述的表格.我不知道如何着手创建有Angular 的边的行.任何帮助都是最好的.

我这样做是有Angular 的，但我认为所使用的框架对解决方案并不重要.

<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>