表格中直接使用<progress>显示异常，因td默认内联上下文导致盒模型收缩、line-height干扰及IE不支持；应改用div模拟进度条并解耦布局，配合RAF批量更新、边界校验与无障碍设计。
表格里直接塞<progress>为什么显示异常？
表格单元格（<td>）默认是内联上下文，而 <progress> 在部分浏览器中会因盒模型收缩或 line-height 干扰导致高度塌陷、文字错位，甚至 value 超出 max 时直接不渲染。常见现象是进度条“看不见”或“只显示一条细线”。
- 必须显式设置
<progress>的 CSS：display: block或display: inline-block，并指定height -
max和value都得写全，比如<progress value="42" max="100">；只写value="42"会让浏览器按max="1"解析，42 > 1 → 渲染失败 - IE 完全不支持
<progress>，哪怕加了 polyfill，在<table>里也容易触发 layout bug，不建议在兼容性要求高的表格中硬上
用<div>模拟进度条嵌入表格的正确结构
核心是把进度逻辑和表格布局解耦：用固定尺寸容器包裹可变宽度填充块，避免 td 内部盒模型干扰。
- 外层
<div class="progress-cell">设为display: block; height: 20px; width: 120px;（固定宽高，脱离表格自动缩放） - 内层
<div class="progress-fill">用style="width: 68%;"行内控制，不能靠 CSS 类写死宽度，否则无法响应数据变化 - 不要把两个进度条塞进同一个
<div>里做双色对比（比如 A/B 组），容易因 padding/border 导致总宽超 100%，应各自独立容器并排 - 示例结构：
<td><div class="progress-cell"><div class="progress-fill" style="width: 75%;"></div></div></td>
动态更新表格中进度条的 JS 注意点
表格行数多时，频繁操作 style.width 会触发布局抖动，尤其滚动中更新更卡顿。
- 别用
for (let i = 0; i < rows.length; i++) { rows[i].querySelector('.progress-fill').style.width = data[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>的表单语义，反而降低可访问性；<div>方案则无此顾虑 - 鼠标悬停时显示 tooltip 提示原始数值（如 “已处理 137 / 182 条”），用
title属性最轻量，无需 JS
