怎样在HTML表格中显示百分比进度：DIV背景色模拟条形图

作者：袖梨 2026-07-16

会撑开行高且易错位；需约束table、col、td、div四层尺寸，td设min-height或padding，div用height:16px和background-size替代width更稳妥，移动端加z-index和固定字号防重叠。

表格里直接塞`<div>`进度条会撑开行高吗？

会，而且非常容易错位。表格单元格（<td>）默认是 vertical-align: middle，但内部 <div> 如果没设固定高度或 line-height，文字和条形会不对齐；更麻烦的是，如果条形 div 用了 height: 20px 但父 <td> 没设 padding 或 min-height，Chrome 可能额外加 2–4px 行间距，导致上下留白不均。

必须给 <td> 加 padding: 4px 8px 或 min-height: 28px（比条形高多 8px，留出文字呼吸空间）
<div> 进度条本身用 height: 16px（别用 20px），配合 border-radius: 8px 视觉更紧凑
避免在 <td> 里写 display: flex——IE 和旧版 Safari 下 flex 容器在 table-cell 中行为不可靠，宽度计算常出错

`width` 百分比在表格单元格里为什么经常不准？

因为 <td> 的宽度由表格布局算法决定，不是普通块级容器。你写 style="width: 75%"，浏览器会按「相对于该列总宽」算，但列宽可能被其他行内容撑开，结果就是 75% 看起来像 60% 或 85%。

解决办法：给整列加 width 固定值，比如 <col style="width: 120px">，再让条形 div 的 width 相对这个固定宽计算
别依赖 table-layout: fixed 后的百分比——它只对第一行生效，后续行仍可能被内容顶开
数值来自后端时，用 Math.round(percent) 截断小数，避免 width: 99.999999999% 在某些缩放比例下渲染为 100% 或 99%

用背景色模拟进度条，`background-size` 能替代 `width` 吗？

可以，但只推荐用于静态展示或极简场景。用 background-image: linear-gradient(...) + background-size 控制填充比例，确实不用动 DOM，也不怕盒模型干扰，但它没法响应式动画，且 IE11 及更早版本不支持 background-size 百分比值。

正确写法：background: linear-gradient(to right, #4a90e2, #4a90e2) no-repeat; background-size: 73% 100%; background-origin: content-box;
必须加 background-origin: content-box，否则 padding 会吃掉一部分渐变区
动画只能靠 JS 切换 class，不能用 transition: background-size——Safari 15.4 之前不支持该属性过渡
如果表格要打印，多数浏览器会忽略 background，所以关键数据（如 “73%” 文字）必须显式写出，不能只靠背景色暗示

移动端表格里进度条文字重叠怎么破？

小屏下单元格窄，百分比数字（比如 “92%”）和条形挤在一起，尤其当字体用了 rem 或系统默认缩放时，文字可能盖住条形右端。

立即学习“前端免费学习笔记（深入）”；

给文字加 position: relative; z-index: 2;，条形 div 设 z-index: 1;，确保文字始终在上层
文字用 font-size: 12px 固定，别用 em 或 rem，避免被系统字体设置放大后溢出
加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 防止长文本撑破单元格，但注意 “92%” 不会触发省略，所以实际只需前两项
真遇到极端窄屏（比如 iPhone SE），建议用 @media (max-width: 375px) 把进度条隐藏，只留文字：“已完成 92%”