本文介绍在不依赖 javascript 或现代布局（如 grid/subgrid）的前提下，通过将 `
在传统 HTML 表格中，
解决的关键在于：改变 以下是可直接运行的完整方案： ✅ 注意事项与最佳实践： 立即学习“前端免费学习笔记（深入）”； 该方案兼顾语义化（保留 的显示模式。将其设为 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%
上支持有限，此时应改用 display: block + 手动 width 控制，并将
改为 display: inline-block；
结构）、兼容性（支持所有现代浏览器）与视觉精度，是静态条形图在受限 CMS 环境下的可靠实现路径。
