如何使用 CSS 为表格行（tr）实现圆角背景与渐变色条形图效果

最简洁有效的方案是将 .chartrow（即目标

.chartrow {
  display: flex;                    /* 启用弹性布局，脱离 table-row 限制 */
  border-radius: 0.5vw;             /* 统一设置整行圆角 */
  overflow: hidden;                 /* 关键！裁剪超出圆角区域的背景 */
  background-image: linear-gradient(to right, #e74c3c, #e74c3c);
  background-color: orange;
  background-repeat: no-repeat;
  background-position: left center;
  margin-block: 0.5rem;             /* 替代原 border-spacing，控制行间距 */
}

同时需调整单元格布局以适配 flex 容器：

• 移除对 单独设置的 border-radius（已由 统一控制）；
• 使用 flex-grow: 1 让第一列（描述文本）自动撑满可用空间；
• 为第二列（百分比）设置固定宽度（如 width: 6ch），确保对齐统一；

td {
  padding: 0.5vw;
  border: solid 2px white; /* 仅用于调试，生产环境可移除 */
}

td:first-child {
  flex-grow: 1;
}

td:last-child {
  width: 6ch;
}

✅ 注意事项： overflow: hidden 是实现“圆角背景”的核心——它强制裁剪掉超出 border-radius 范围的背景图像/渐变，使视觉上完全贴合圆角轮廓； margin-block 替代 border-spacing 更可控，避免因 border-collapse: separate 引起的不可预测间隙； 若需兼容老旧浏览器（如 IE），display: flex 在 上的支持度有限，此时应回退至「为每个 分别设置圆角 + 使用伪元素或额外包裹层模拟背景条」的方案； 所有尺寸单位（vw、ch、rem）建议保持一致，便于响应式维护。

最终效果：每一行呈现为带圆角的彩色条形块，背景渐变严格限定在圆角区域内，文字清晰居中，结构语义清晰且无需 JavaScript 或额外 DOM 元素——完美满足静态图表在受限 CMS 环境下的交付需求。