本文介绍在受限于纯 html 表格 + 基础 css 的场景下，如何让 `
在标准表格布局中，
最简洁有效的方案是将 .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 环境下的交付需求。
立即学习“前端免费学习笔记（深入）”；
