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

心靈之曲 2026-01-25 00:00:00 次阅读

本文介绍如何通过将 `

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

在标准 HTML 表格中，

默认是 display: table-row，无法直接应用 border-radius 实现圆角背景裁剪——即使给设置圆角，背景图像或渐变仍会以矩形溢出。根本解法是改变行的显示模型：将设为 display: flex（或 block），使其支持盒模型样式（如 border-radius 和 overflow）。

关键步骤如下：

启用弹性布局并设置圆角
给 .chartrow 添加 display: flex 和 border-radius: 0.5vw，使整行成为可圆角化的容器。
防止背景溢出
必须添加 overflow: hidden ——这是实现“圆角背景”的核心。它会裁剪掉超出圆角区域的背景图像/渐变，让视觉效果真正圆润。
优化单元格布局
使用 flex-grow: 1 让第一列（文本描述）自适应宽度，第二列（百分比）设为固定宽（如 6ch），确保所有条形对齐一致，避免因内容长度差异导致背景错位。

保留语义与兼容性
无需修改 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;
}