应使用<div>替代<progress>实现表格内进度条，外层td设padding:0，容器用display:block+固定height，宽度用行内style.width动态设置，并通过Math.min(Math.max(0, Number(raw)*100),100)归一化数据，配合requestAnimationFrame平滑动画，文字覆盖需父容器position:relative并居中对齐。
表格单元格里放<div>进度条，别用<progress>
原生<progress>在<td>里容易被表格盒模型挤压变形，且IE完全不支持；<div>容器手动控制宽度更稳。关键不是“能不能放”，而是“怎么放不破布局”：
- 外层
<td>设padding: 0，避免内边距干扰进度条高度 - 进度条容器用
display: block+ 固定height（如16px），别依赖line-height或vertical-align - 填充层必须用
style.width行内设置（如width: 72%），CSS类里写死百分比无法响应数据变化 - 若表格有
table-layout: fixed，需确保列宽足够容纳进度条+文字，否则overflow: hidden会裁掉右侧
Math.min(Math.max(0, percent), 100)必须加在JS计算环节
表格数据常来自后端API，原始值可能是负数、null、小数（如0.72）或超100的整数（如120）。直接赋值会导致：
- 负数：进度条向左溢出，破坏表格结构
- 超100：宽度超过容器，可能撑开
<td>或触发横向滚动条 - 小数未归一化：若原始值是
0.72却设width: 0.72%，实际只显示0.72%而非72%
正确做法是统一转成0–100区间：const width = Math.min(Math.max(0, Number(raw) * 100), 100)（乘100适用于小数输入）。
动画卡顿？用requestAnimationFrame替代setTimeout
表格里多个进度条同时更新时，用setTimeout驱动style.width会明显跳变。原因在于：
立即学习“前端免费学习笔记（深入）”；
-
setTimeout帧率不可控，可能16ms、32ms甚至更长，人眼可感知卡顿 - 每次修改
width都触发同步重排，浏览器来不及合并渲染 - 读取DOM（如
getBoundingClientRect()）放在循环里会进一步拖慢
应把起始值和目标值存为变量，在requestAnimationFrame回调中只做插值计算：current = start + (end - start) * t，然后一次性更新style.width。
文字居中覆盖要小心position: absolute的定位基准
想在进度条上叠一层“72%”文字，常见错误是给文字加position: absolute却不设父容器position: relative——此时文字会相对于<body>定位，跑出表格单元格。
- 进度条外层
<div>必须设position: relative - 文字
<span>用position: absolute+top: 50%+transform: translateY(-50%)垂直居中 - 避免用
left: 50%水平居中，表格列宽可能变化，应改用text-align: center配合width: 100%
表格场景下，样式污染风险高，所有定位和尺寸务必用明确单位（如px或%），别依赖浏览器默认行为。
