本文介绍在受限于纯 html 表格 + 基础 css 的场景下，如何让 `
在标准表格布局中，<tr> 默认以 display: table-row 渲染，这导致它无法直接应用 border-radius 或裁剪背景——即使给 <td> 设置圆角，背景图仍会以矩形形式溢出，破坏视觉一致性。解决这一问题的关键在于：改变 <tr> 的显示模式，使其支持盒模型样式控制。
最简洁有效的方案是将 .chartrow（即目标 <tr>）设为 display: flex，并配合 border-radius 与 overflow: hidden：
.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 容器：
- 移除对 <td> 单独设置的 border-radius（已由 <tr> 统一控制）；
- 使用 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 在 <tr> 上的支持度有限，此时应回退至「为每个 <td> 分别设置圆角 + 使用伪元素或额外包裹层模拟背景条」的方案； 所有尺寸单位（vw、ch、rem）建议保持一致，便于响应式维护。
最终效果：每一行呈现为带圆角的彩色条形块，背景渐变严格限定在圆角区域内，文字清晰居中，结构语义清晰且无需 JavaScript 或额外 DOM 元素——完美满足静态图表在受限 CMS 环境下的交付需求。
立即学习“前端免费学习笔记（深入）”；
