用<div>嵌套实现表格单元格内进度条需外层div设固定高度和overflow:hidden，内层div用width动态控制进度，须做数值归一化处理并兼容多色分段、渐变填充或双指标对比场景。
用 <div> 嵌套实现表格单元格内进度条
表格里不能直接塞 <progress> 标签——它语义是“任务进度”，不是“数据占比”，且在 <td> 里渲染常出高度塌陷、对齐错位问题。真实项目中，90% 的表格进度条都是靠两个 <div> 嵌套 + 行内 width 控制的。
关键不是“怎么加”，而是“怎么不崩”：
- 外层
<div>设固定高度（比如height: 20px）、background-color: #e0e0e0模拟轨道，必须设overflow: hidden - 内层
<div>设height: 100%、background: linear-gradient(90deg, #4caf50, #8bc34a)，宽度用 JS 或模板引擎动态写死为style="width: 72%" - 别用 CSS 类写死 width（如
.w-72 { width: 72% }），表格每行数据不同，得每个单元格单独算 - 如果表格用了
table-layout: fixed，外层<div>宽度可能被截断，建议加min-width: 0防止收缩
value 超出 0–100 范围时的边界处理
后端返回的原始值可能是 0.72、72、或 72.3，也可能带负数、null、undefined。直接塞进 width 会炸布局：
-
width: -5%→ 单元格向左溢出，拖垮整行 -
width: 120%→ 内层 div 撑破外层，颜色盖到隔壁单元格 -
width: NaN%→ 整个进度条消失
JS 更新时必须做归一化：
立即学习“前端免费学习笔记（深入）”；
function normalizePercent(val) {
if (val == null || typeof val !== 'number') return 0;
return Math.min(Math.max(0, val), 100);
}
然后用：fillDiv.style.width = normalizePercent(rawValue) + '%';
表格中多色进度条的三种可靠实现方式
所谓“多色”，实际指三类场景：分段色块（如 0–30% 红、30–70% 黄、70–100% 绿）、渐变过渡、或双指标对比。原生 <progress> 全都不支持，只能靠 <div> 手动拆解：
- 分段色块：用 3 个同高
<div>并排，各自width按区间比例计算（如第一段width: 30%），注意总和必须 ≤ 100%，否则盒模型误差会撑宽单元格 - 渐变填充：只用 1 个内层
<div>，但背景设background: linear-gradient(to right, #f44336 0%, #ff9800 40%, #4caf50 100%)，靠width截断显示范围 - 双指标对比（如“完成 vs 目标”）：两个同宽外层
<div>并排，各自内层按独立数值算width，避免用单容器里放两色块——IE 和旧版 Safari 对绝对定位子元素的百分比解析极不稳定
IE11 及以下兼容必须绕开的坑
IE 不支持 linear-gradient 的现代写法，也不认 transform: scaleX() 动画。但你几乎不可能为表格进度条专门写 IE 降级方案——成本太高。务实做法是：
- 所有渐变背景，必须带
background: #4caf50纯色兜底（IE 会忽略后面的linear-gradient） - 避免用
flex布局包裹进度条，IE11 对flex在<td>里的支持极差，改用display: inline-block+vertical-align: middle - 别依赖
requestAnimationFrame做平滑更新，IE11 不支持，用setTimeout+ 步长控制更稳 - 如果项目强制要求 IE 支持，直接放弃彩色/渐变，统一用单色 + 百分比文字（如
72%）更省心
真正麻烦的不是怎么让它“看起来像进度条”，而是怎么让它在表格各种 white-space、word-break、text-overflow 组合下，既不换行也不撑宽——这需要每一行都实测，没捷径。
