表格中直接使用显示异常，因td默认内联上下文导致盒模型收缩、line-height干扰及ie不支持；应改用div模拟进度条并解耦布局，配合raf批量更新、边界校验与无障碍设计。
表格里直接塞<progress></progress>为什么显示异常？
表格单元格（<td>）默认是内联上下文，而 <code><progress></progress> 在部分浏览器中会因盒模型收缩或 line-height 干扰导致高度塌陷、文字错位，甚至 value 超出 max 时直接不渲染。常见现象是进度条“看不见”或“只显示一条细线”。
- 必须显式设置
<progress></progress>的 CSS：display: block或display: inline-block，并指定height -
max和value都得写全，比如<progress value="42" max="100"></progress>；只写value="42"会让浏览器按max="1"解析，42 > 1 → 渲染失败 - IE 完全不支持
<progress></progress>，哪怕加了 polyfill，在<table> 里也容易触发 layout bug，不建议在兼容性要求高的表格中硬上 <h3>用<code><div>模拟进度条嵌入表格的正确结构 <p>核心是把进度逻辑和表格布局解耦：用固定尺寸容器包裹可变宽度填充块，避免 td 内部盒模型干扰。</p> <ul><li>外层 <code><div class="progress-cell"> 设为 <code>display: block; height: 20px; width: 120px;（固定宽高，脱离表格自动缩放） - 内层
<div class="progress-fill"> 用 <code>style="width: 68%;"行内控制，不能靠 CSS 类写死宽度，否则无法响应数据变化 - 不要把两个进度条塞进同一个
<div> 里做双色对比（比如 A/B 组），容易因 padding/border 导致总宽超 100%，应各自独立容器并排 <li>示例结构：<pre class="brush:php;toolbar:false;"><td><div class="progress-cell"><div class="progress-fill" style="width: 75%;"></div></div></td></pre> </li> <h3>动态更新表格中进度条的 JS 注意点</h3> <p>表格行数多时，频繁操作 <code>style.width会触发布局抖动，尤其滚动中更新更卡顿。- 别用
for (let i = 0; i 直接批量改 —— 每次都强制重排 - 改用
requestAnimationFrame批量合并更新：function updateProgressInTable(rows, widths) { requestAnimationFrame(() => { rows.forEach((row, i) => { const bar = row.querySelector('.progress-fill'); if (bar) bar.style.width = widths[i] + '%'; }); });} - 如果进度值来自 API，确保后端返回的是归一化后的百分比（0–100 整数），避免前端再做除法运算引入浮点误差
- 边界校验必须做：
Math.min(Math.max(width, 0), 100)，防止数据异常导致负宽或超 100% 撑破容器
表格里进度条样式和可访问性怎么兼顾？
纯视觉进度条在表格中容易被屏幕阅读器忽略，且颜色对比度不足时对色觉障碍用户不友好。
- 每个进度容器后加
<span class="sr-only">完成度：75%</span>（.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }） - 填充色别只用绿色，搭配灰阶背景时对比度常低于 4.5:1；建议用
background: #2e7d32（达标 WCAG AA）而非浅绿 - 禁用
appearance: none在表格内——它在某些浏览器中会破坏<progress></progress>的表单语义，反而降低可访问性；<div> 方案则无此顾虑 <li>鼠标悬停时显示 tooltip 提示原始数值（如 “已处理 137 / 182 条”），用 <code>title属性最轻量，无需 JS
表格里进度条不是“塞进去就行”，真正麻烦的是 DOM 嵌套层级、盒模型干扰、批量更新性能和无障碍支持这四点，漏掉任意一个都会在真实数据量大时暴露问题。
- 别用
