如何用纯 HTML 表格和 CSS 实现带圆角背景的横向条形图

本文介绍如何通过将 `

在标准 HTML 表格中，

关键步骤如下：

1. 启用弹性布局并设置圆角
   给 .chartrow 添加 display: flex 和 border-radius: 0.5vw，使整行成为可圆角化的容器。

2. 防止背景溢出
   必须添加 overflow: hidden ——这是实现“圆角背景”的核心。它会裁剪掉超出圆角区域的背景图像/渐变，让视觉效果真正圆润。

3. 优化单元格布局
   使用 flex-grow: 1 让第一列（文本描述）自适应宽度，第二列（百分比）设为固定宽（如 6ch），确保所有条形对齐一致，避免因内容长度差异导致背景错位。

4. 保留语义与兼容性
   无需修改 HTML 结构，仍使用标准

   ，仅通过 CSS 覆盖默认行为，完全满足老旧 CMS 或邮件模板等仅支持基础 CSS 的环境要求。

   ✅ 完整示例代码：

   table {
     border-collapse: separate;
     border-spacing: 0 0.75vw;
     width: 35vw;
     margin: 1vw auto auto auto;
   }
   
   td {
     border: solid 2px white; /* 仅作视觉参考，可移除 */
     padding: 0.5vw;
   }
   
   td:first-child {
     flex-grow: 1; /* 文本列占满剩余空间 */
   }
   
   td:last-child {
     width: 6ch; /* 百分比列等宽，保障条形右端对齐 */
   }
   
   .chartrow {
     display: flex;                /* 关键：启用 flex 布局 */
     border-radius: 0.5vw;         /* 圆角应用于整行 */
     overflow: hidden;             /* 关键：裁剪背景，实现真圆角 */
     background-image: linear-gradient(to right, #e74c3c, #e74c3c);
     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%; }
   
   .container {
     background-color: #27ae60;
     width: 50vw;
     margin: auto;
   }

   ⚠️ 注意事项：

   

   学习导航

   学习者优质的学习网址导航网站

   下载

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

   • 避免同时使用 border-spacing 和 display: flex 的
   ——它们不兼容，改用 margin-block 控制行间距更可靠；
   background-size 推荐显式写为 X% 100%（宽高），确保纵向填满单元格高度；
   若需多色渐变条形，可将 linear-gradient 替换为 repeating-linear-gradient 或叠加伪元素；
   所有单位统一使用 vw/rem 保证响应性，但若目标平台不支持 vw，可替换为 px 或 %。

   此方案兼顾语义清晰、代码简洁与极致兼容性，是静态条形图在受限环境中的最优 CSS 实现。