本文介绍在受限于纯 html 表格 + 基础 css 的场景下，如何让 `

` 元素呈现圆角边框及裁剪后的背景图像（如渐变色进度条），突破 `display: table-row` 的样式限制。

在标准表格布局中，<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 容器：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 移除对 <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 环境下的交付需求。

立即学习“前端免费学习笔记（深入）”；