如何用HTML和CSS实现带斜侧边的筛选统计表格？

我想用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 sufficient screening by others).</td>   
 </tr>
</table>

要实现带斜侧边的行，核心是用CSS的裁剪路径或边框技巧制作斜角效果，以下是两种实用方案：

方案1：用clip-path自定义斜角 #

适合需要灵活调整斜角角度的场景，步骤如下：

1. 给目标表格行添加自定义类，比如angled-row
2. 通过clip-path属性定义单元格的裁剪区域，实现斜侧边

对应的CSS代码：

/* 确保表格无间距，避免斜角错位 */
table {
  border-collapse: collapse;
  width: 100%;
}

/* 首列右侧斜切，可调整百分比改变角度 */
.angled-row td:first-child {
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
  padding-right: 20px; /* 防止内容被裁剪 */
  background-color: #f8f9fa; /* 可根据需求设置背景色 */
}

/* 尾列左侧斜切效果 */
.angled-row td:last-child {
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
  padding-left: 20px;
  background-color: #f8f9fa;
}

修改表格行，添加类：

<tr class="angled-row">
  <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 sufficient screening by others).</td>   
</tr>

方案2：用边框模拟斜角（兼容旧浏览器） #

如果需要兼容不支持clip-path的旧浏览器，可通过边框模拟三角形实现斜侧边：

.angled-border-row td:first-child {
  position: relative;
  overflow: hidden;
  padding-right: 25px;
  background-color: #f8f9fa;
}

.angled-border-row td:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  /* 边框高度和行高保持一致 */
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  /* 边框颜色和表格背景色一致，覆盖边缘形成斜角 */
  border-left: 20px solid #ffffff;
}

将目标行的类替换为angled-border-row即可生效。

注意事项 #

• 调整clip-path的百分比或边框尺寸时，需配合单元格内边距，避免内容被裁剪
• 如果需要给中间列也添加斜角，可参考上述逻辑对td:nth-child(n)设置样式
• 进度条区域的样式可保持不变，只需针对目标行添加斜角样式即可

内容的提问来源于stack exchange，提问作者Chris