如何用纯 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 实现。

# ai  # 这是  # 可将  # 应用于  # 单元格  # 使其  # css  # 设为  # 不支持  # 行间  # javascript  # java  # svg  # html  # border  # display  # background  # tr  # table  # cms  # 圆角  # flex  # overflow  # td  # margin  # 伪元素  # 条形图  # 弹性布局 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】