表格内用div模拟进度条必须设overflow:hidden，因td默认table-cell不触发BFC，子元素超宽会撑破单元格；需嵌套progress-container并设display:block、width:100%、overflow:hidden；同时补全ARIA属性确保可访问性。
用 div 模拟表格内进度条必须设 overflow: hidden
表格单元格（<td>）默认是 table-cell 显示模式，不触发 BFC，导致子元素 width 超出时不会被裁剪——进度条会撑破单元格、破坏表格布局。直接写 <div class="progress-fill" style="width: 72%"></div> 很可能溢出或拉宽整列。
正确做法是：在 <td> 内嵌一层 <div class="progress-container">，并强制它成为块级容器且裁剪内容：
.progress-container { display: block; width: 100%; height: 20px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden; }.progress-fill { height: 100%; background-color: #4caf50; width: 0%; transition: width 0.3s ease; }- 动态更新时只改
.progress-fill的style.width，别动容器尺寸
table 里用 transform: scaleX() 替代 width 更稳但有陷阱
用 transform: scaleX() 渲染进度条确实更顺滑（GPU 加速），但在表格中容易错位——因为 scaleX() 基于元素自身原点缩放，而 table-cell 的对齐逻辑会让缩放后的内容视觉偏移。
要让它对齐左边缘且不抖动，必须加两处控制：
立即学习“前端免费学习笔记（深入）”；
- 父容器（
.progress-container）设overflow: hidden和position: relative - 进度条元素（
.progress-fill）设position: absolute; top: 0; left: 0; bottom: 0; transform-origin: left center; - JS 更新时用
element.style.transform = 'scaleX(' + ratio + ')'，ratio 范围严格为0–1
注意：如果表格用了 border-collapse: collapse，position: absolute 可能受边框影响，建议统一用 separate 模式。
表格进度条必须手动绑定 ARIA 属性才可访问
原生 <progress> 自带语义和屏幕阅读器支持，但表格里手写的 <div> 进度条默认是纯装饰。若数据有业务含义（如“完成率”“通过率”），必须补全 ARIA：
- 外层容器用
<div role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"> - 不要把 ARIA 放在
<td>上——它不是控件容器，应放在进度条最外层<div> - 每次 JS 更新进度值时，同步更新
aria-valuenow属性，不能只改样式 - 可选：加
aria-label="当前完成率：65%"提供上下文，避免仅读数字
百分比计算要防 NaN 和负值，尤其从表格数据提取时
表格常从后台吐出原始数值（如 score: 87, total: 100），JS 计算 width 或 scaleX 前不校验会直接崩：
- 先做类型转换：
const value = Number(row.score); const max = Number(row.total); - 再兜底：
const ratio = isNaN(value) || isNaN(max) || max - 特别注意：表格里可能混入空字符串、
"—"、"N/A"，Number("—")返回NaN，必须提前过滤 - 如果表格支持排序或筛选，DOM 更新后需重新计算所有可见行的进度条，别只依赖初始渲染
表格场景下最容易被忽略的是：当某行数据为空或异常时，进度条显示为 0% 是合理 fallback，但不能让整个表格 JS 报错中断后续渲染。
