本文介绍在不依赖 javascript 或现代布局（如 grid/subgrid）的前提下，通过将 `
在传统 HTML 表格中，<tr> 元素默认具有 display: table-row 计算样式，这导致它无法直接应用 border-radius —— 即使为 <td> 单独设置圆角，其背景图像或渐变仍会以矩形方式溢出，无法真正“裁剪”为圆角形状。
解决的关键在于：改变 <tr> 的显示模式。将其设为 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;
}<div class="container">
<table>
<tbody>
<tr class="chartrow row1">
<td>Answer 1</td>
<td>6.5%</td>
</tr>
<tr class="chartrow row2">
<td>Answer 2</td>
<td>20.3%</td>
</tr>
<tr class="chartrow row3">
<td>Answer 3</td>
<td>85%</td>
</tr>
</tbody>
</table>
</div>✅ 注意事项与最佳实践：
立即学习“前端免费学习笔记（深入）”；
- background-size 推荐使用 X% 100% 明确指定高度为满高，避免因行高变化导致背景拉伸失真；
- 若需兼容极老浏览器（如 IE11），display: flex 在 <tr> 上支持有限，此时应改用 display: block + 手动 width 控制，并将 <td> 改为 display: inline-block；
- 白边（border: solid 2px white）仅为调试用途，实际部署时建议移除或替换为 outline / box-shadow 实现更可控的描边；
- 所有尺寸单位（vw, rem, ch）均采用相对单位，确保响应式缩放一致性。
该方案兼顾语义化（保留 <table> 结构）、兼容性（支持所有现代浏览器）与视觉精度，是静态条形图在受限 CMS 环境下的可靠实现路径。
