主页 / user-933278

Chris's questions

Martin Hope
Chris
Asked: 2023-08-17 22:32:15 +0800 CST
  • 6

我想使用 css 和 html 创建一个看起来像这样的表。我不知道如何解决这个问题。

我可以使用简单的矩形 div 和 css 创建进度条。我还可以制作带有描述的表格。我不知道如何创建带有倾斜边的行。任何帮助都会很棒。

在此输入图像描述

我正在 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>
html