如何为带背景图的CSS表格行实现圆角效果？

我想要创建类似水平条形图的效果，百分比以彩色显示在中性背景上，描述文字置于上方（效果类似带自定义数据标签的水平条形图，但无需交互/响应式）。受限于目标网站的要求，只能使用HTML表格和基础CSS实现。

我希望表格的各行具有圆角，且已发现仅通过设置单元格的border-radius可实现此效果，但行的背景图仍为矩形。

现有代码示例：

CSS代码 #

table {
  border-collapse: separate;
  border-spacing: 0 0.75vw;
  width: 35vw;
  margin: 1vw auto auto auto;
}

td {
  border: solid 2px white;
  padding: 0.5vw;
}

td:first-child {
  border-top-left-radius: 0.5vw;
  border-bottom-left-radius: 0.5vw;
}

td:last-child {
  border-bottom-right-radius: 0.5vw;
  border-top-right-radius: 0.5vw;
}

.chartrow {
  background-image: linear-gradient(red, red);
  background-color: orange;
  background-position: left;
  background-repeat: no-repeat;
}

.row1 {
  background-size: 6.5%;
}

.row2 {
  background-size: 20.3%;
}

.container {
  background-color: green;
  width: 50vw;
  margin: auto;
}

HTML代码 #

<div class="container">
  <table>
    <tbody>
      <tr class="chartrow row1">
        <td>Answer 1</td>
        <td>6.5%</td>
      </tr>
      <tr class="chartrow row2">
        <td>Answer 2</td>
        <td>20.3%</td>
      </tr>
    </tbody>
  </table>
</div>

（白色边框仅用于展示预期效果）

请问是否有方法让背景图也具有圆角，或是有其他方式实现背景条形图效果？

方法一：用单元格伪元素实现带圆角的条形 #

<tr>元素无法直接通过overflow: hidden裁剪背景，我们可以把彩色条形放到第一个<td>的伪元素里，同时给所有<td>添加overflow: hidden，让背景被单元格的圆角自动裁剪：

table {
  border-collapse: separate;
  border-spacing: 0 0.75vw;
  width: 35vw;
  margin: 1vw auto auto auto;
}

td {
  border: solid 2px white;
  padding: 0.5vw;
  overflow: hidden; /* 关键：让背景被圆角裁剪 */
}

td:first-child {
  border-top-left-radius: 0.5vw;
  border-bottom-left-radius: 0.5vw;
  position: relative;
  background-color: orange; /* 中性背景 */
}

td:last-child {
  border-bottom-right-radius: 0.5vw;
  border-top-right-radius: 0.5vw;
  background-color: orange;
}

/* 伪元素实现彩色条形 */
.chartrow td:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: red;
  border-top-left-radius: 0.5vw;
  border-bottom-left-radius: 0.5vw;
  z-index: -1; /* 让文字显示在条形上方 */
}

.row1 td:first-child::before {
  width: 6.5%;
}

.row2 td:first-child::before {
  width: 20.3%;
}

.container {
  background-color: green;
  width: 50vw;
  margin: auto;
}

HTML无需修改，这样伪元素的彩色条形会被第一个单元格的圆角裁剪，整体行的圆角效果完整，文字也能正常显示在条形上方。

方法二：给行设置块级属性实现整体圆角 #

如果希望整个行的背景条形是连续的（覆盖两个单元格），可以给<tr>设置display: block，让它能应用border-radius和overflow: hidden来裁剪背景：

table {
  border-collapse: separate;
  border-spacing: 0 0.75vw;
  width: 35vw;
  margin: 1vw auto auto auto;
}

tr {
  display: block; /* 让tr支持圆角和overflow裁剪 */
  border-radius: 0.5vw;
  overflow: hidden;
}

td {
  border: solid 2px white;
  padding: 0.5vw;
  box-sizing: border-box;
}

td:first-child {
  width: 70%; /* 手动分配单元格宽度 */
}

td:last-child {
  width: 30%;
}

.chartrow {
  /* 用CSS变量控制条形宽度，实现渐变分割 */
  background: linear-gradient(to right, red 0%, red var(--percent), orange var(--percent));
}

.row1 {
  --percent: 6.5%;
}

.row2 {
  --percent: 20.3%;
}

.container {
  background-color: green;
  width: 50vw;
  margin: auto;
}

这种方式下，整个行的背景渐变会被border-radius裁剪成圆角，条形效果更连贯，HTML同样不需要修改。

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