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

本文介绍如何通过将 `

` 元素设为 `display: flex` 并配合 `border-radius` 与 `overflow: hidden`，在不使用 svg 或 javascript 的前提下，为表格行创建真正圆角的彩色背景条（如水平条形图），完美兼容基础 html/css 环境。

在标准 html 表格中，

默认是 display: table-row，无法直接应用 border-radius 实现圆角背景裁剪——即使给

设置圆角，背景图像或渐变仍会以矩形溢出。根本解法是改变行的显示模型：将 设为 display: flex（或 block），使其支持盒模型样式（如 border-radius 和 overflow）。

关键步骤如下：

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 实现。