主页 / coding / 问题 / 76922518
Accepted
Chris
Asked: 2023-08-17 22:32:15 +0800 CST

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

  • 772

我想使用 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

1 个回答

  1. Best Answer

    你说的对，框架是无关紧要的，这可以用普通的 HTML 来完成。到目前为止，您已经发布了 HTML，但还没有发布 CSS，您可以将其也放入吗？另外，这绝对必须使用表格来完成吗？我个人更喜欢使用 flex 来创建整体布局（4 行，3 列）。在看到您的回复后，我将使用潜在的解决方案编辑此答案。

    编辑：查看下面的 stackblitz： https://stackblitz.com/edit/angular-welcome-app-ibkebj ?file=src%2Fapp%2Fapp.component.html

    我使用了很多 Angular 功能（以及一些引导程序，使我的开发速度更快，但易于分离），所以现在它将依赖于框架。

    • 2

相关问题