应使用替代实现表格内进度条，外层td设padding:0，容器用display:block+固定height，宽度用行内style.width动态设置，并通过math.min(math.max(0, number(raw)*100),100)归一化数据，配合requestanimationframe平滑动画，文字覆盖需父容器position:relative并居中对齐。

表格单元格里放<div>进度条，别用<code><progress></progress>

原生<progress></progress>在<td>里容易被表格盒模型挤压变形，且IE完全不支持；<code><div>容器手动控制宽度更稳。关键不是“能不能放”，而是“怎么放不破布局”：<ul><li>外层<code><td>设<code>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>或触发横向滚动条<li>小数未归一化：若原始值是<code>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会明显跳变。原因在于：


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
• setTimeout帧率不可控，可能16ms、32ms甚至更长，人眼可感知卡顿
• 每次修改width都触发同步重排，浏览器来不及合并渲染
• 读取DOM（如getBoundingClientRect()）放在循环里会进一步拖慢

应把起始值和目标值存为变量，在requestAnimationFrame回调中只做插值计算：current = start + (end - start) * t，然后一次性更新style.width。

文字居中覆盖要小心position: absolute的定位基准

想在进度条上叠一层“72%”文字，常见错误是给文字加position: absolute却不设父容器position: relative——此时文字会相对于定位，跑出表格单元格。

• 进度条外层<div>必须设<code>position: relative
• 文字<span></span>用position: absolute + top: 50% + transform: translateY(-50%)垂直居中
• 避免用left: 50%水平居中，表格列宽可能变化，应改用text-align: center配合width: 100%

表格场景下，样式污染风险高，所有定位和尺寸务必用明确单位（如px或%），别依赖浏览器默认行为。