用嵌套实现表格单元格内进度条需外层div设固定高度和overflow:hidden，内层div用width动态控制进度，须做数值归一化处理并兼容多色分段、渐变填充或双指标对比场景。
用 <div> 嵌套实现表格单元格内进度条
<p>表格里不能直接塞 <code><progress></progress> 标签——它语义是“任务进度”，不是“数据占比”，且在 <td> 里渲染常出高度塌陷、对齐错位问题。真实项目中，90% 的表格进度条都是靠两个 <code><div> 嵌套 + 行内 <code>width 控制的。
关键不是“怎么加”，而是“怎么不崩”：
- 外层
<div> 设固定高度（比如 <code>height: 20px）、background-color: #e0e0e0模拟轨道，必须设overflow: hidden - 内层
<div> 设 <code>height: 100%、background: linear-gradient(90deg, #4caf50, #8bc34a)，宽度用 JS 或模板引擎动态写死为style="width: 72%" - 别用 CSS 类写死 width（如
.w-72 { width: 72% }），表格每行数据不同，得每个单元格单独算 - 如果表格用了
table-layout: fixed，外层<div> 宽度可能被截断，建议加 <code>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></progress>全都不支持，只能靠<div> 手动拆解： <ul><li>分段色块：用 3 个同高 <code><div> 并排，各自 <code>width按区间比例计算（如第一段width: 30%），注意总和必须 ≤ 100%，否则盒模型误差会撑宽单元格 -
- 渐变填充：只用 1 个内层
<div>，但背景设 <code>background: linear-gradient(to right, #f44336 0%, #ff9800 40%, #4caf50 100%)，靠width截断显示范围 - 双指标对比（如“完成 vs 目标”）：两个同宽外层
<div> 并排，各自内层按独立数值算 <code>width，避免用单容器里放两色块——IE 和旧版 Safari 对绝对定位子元素的百分比解析极不稳定IE11 及以下兼容必须绕开的坑
IE 不支持
linear-gradient的现代写法，也不认transform: scaleX()动画。但你几乎不可能为表格进度条专门写 IE 降级方案——成本太高。务实做法是：- 所有渐变背景，必须带
background: #4caf50纯色兜底（IE 会忽略后面的linear-gradient） - 避免用
flex布局包裹进度条，IE11 对flex在<td> 里的支持极差，改用 <code>display: inline-block+vertical-align: middle - 别依赖
requestAnimationFrame做平滑更新，IE11 不支持，用setTimeout+ 步长控制更稳 - 如果项目强制要求 IE 支持，直接放弃彩色/渐变，统一用单色 + 百分比文字（如
72%）更省心
真正麻烦的不是怎么让它“看起来像进度条”，而是怎么让它在表格各种
white-space、word-break、text-overflow组合下，既不换行也不撑宽——这需要每一行都实测，没捷径。 - 所有渐变背景，必须带
