如何使用 CSS 为表格行实现圆角背景（含渐变色/图片）

本文介绍在不依赖 javascript 或现代布局（如 grid/subgrid）的前提下，通过将 `

` 设置为 `display: flex` 并结合 `border-radius` 与 `overflow: hidden`，实现带圆角的条形图式表格行背景效果。

在传统 HTML 表格中，

元素默认具有 display: table-row 计算样式，这导致它无法直接应用 border-radius —— 即使为 单独设置圆角，其背景图像或渐变仍会以矩形方式溢出，无法真正“裁剪”为圆角形状。

解决的关键在于：改变 的显示模式。将其设为 display: flex（或 block），即可像普通块级元素一样支持 border-radius 和 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;
  vertical-align: middle;
}

/* 左侧文本单元格自适应伸展 */
td:first-child {
  flex-grow: 1;
}

/* 右侧百分比单元格固定宽度，保证对齐统一 */
td:last-child {
  width: 6ch;
  text-align: right;
  font-weight: bold;
}

.chartrow {
  display: flex;                    /* 关键：启用 flex 布局，支持 border-radius */
  border-radius: 0.5vw;             /* 统一应用于整行 */
  overflow: hidden;                   /* 关键：裁剪背景，实现真正圆角效果 */
  background-image: linear-gradient(to right, #4a90e2, #4a90e2);
  background-color: #f0f0f0;          /* 降级背景色 */
  background-repeat: no-repeat;
  background-position: left center;
  margin-block: 0.5rem;              /* 替代原 border-spacing 的垂直间距控制 */
}

.row1 { background-size: 6.5% 100%; }
.row2 { background-size: 20.3% 100%; }
.row3 { background-size: 85% 100%; }

.container {
  background-color: #e8f5e9;
  width: 50vw;
  margin: auto;
  padding: 1vw;
  border-radius: 0.5vw;
}

  

    

      

        
Answer 1
        
6.5%
      
      

        
Answer 2
        
20.3%
      
      

        
Answer 3
        
85%
      
    
  

✅ 注意事项与最佳实践：

• background-size 推荐使用 X% 100% 明确指定高度为满高，避免因行高变化导致背景拉伸失真；
• 若需兼容极老浏览器（如 IE11），display: flex 在 上支持有限，此时应改用 display: block + 手动 width 控制，并将 改为 display: inline-block；
• 白边（border: solid 2px white）仅为调试用途，实际部署时建议移除或替换为 outline / box-shadow 实现更可控的描边；
• 所有尺寸单位（vw, rem, ch）均采用相对单位，确保响应式缩放一致性。

该方案兼顾语义化（保留

结构）、兼容性（支持所有现代浏览器）与视觉精度，



是静态条形图在受限 CMS 环境下的可靠实现路径。