在HTML表格中实现可点击进度条的关键是增强容器交互能力而非修改进度条本身，通过给设置padding和touch-action属性来扩大热区并消除延迟，同时避免pointer-events:none误关交互。
在 HTML 表格中插入可点击的进度条，核心难点不是“画出来”，而是让点击区域可靠、语义正确、不干扰表格交互。原生 <progress></progress> 默认点击热区极窄，<div> 自定义又容易因 <code>pointer-events: none 误关交互 —— 这是移动端最常踩的坑。
为什么 <progress></progress> 在表格里点不中
浏览器对 <progress></progress> 的默认点击区域仅覆盖内部填充条（非整个控件），尤其在移动端缩放或小尺寸单元格中，有效热区常不足 8px 宽。加上表格单元格本身 padding 为 0，用户手指根本碰不到触发点。
- 用
getBoundingClientRect()测过：Chrome on Android 上<progress></progress>可点击宽度常 ≤ 4px -
label包裹<progress></progress>无效，它不支持for属性绑定 - 直接给
<progress></progress>加padding会破坏渲染，多数浏览器忽略该样式
给 <td> 加 padding + <code>touch-action 是最简解法
不改进度条本身，只增强容器交互能力。这是实测在 iOS Safari 和 Chrome Android 上都生效的最小改动。
- 给包裹进度条的
<td> 设置 <code>padding: 8px，立刻扩大可触区域 - 追加
touch-action: manipulation，避免 300ms 延迟，提升响应感 - 如果表格已用
border-collapse: collapse，需额外加border-spacing: 0防止 padding 被吞
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
td.progress-cell {
padding: 8px;
touch-action: manipulation;
}
用 <div> 替代时别设 <code>pointer-events: none
很多人用 <div class="progress-bar"><div class="progress-fill"></div></div> 实现自定义样式，但为了透传点击到背后行/单元格，习惯性加 pointer-events: none —— 这会让进度条彻底不可点。
- 若需透传，应只对
.progress-fill设pointer-events: none，保留外层容器可点击 - 更稳妥做法：用
z-index和position: relative控制层级，而非依赖pointer-events - 监听点击时，用
event.target.closest('.progress-bar')判断是否点中进度条区域，避免误判
进度圆环在表格里要防缩放失真
表格列宽动态变化时，<svg></svg> 圆环若用固定像素宽高（如 width="40" height="40"），会被拉伸或压缩，弧长计算失效。
- 必须设
viewBox="0 0 40 40"，且r、cx、cy用绝对数值（不能用 %） - 容器
<td> 内用 <code>width: 100%; height: auto+preserveAspectRatio="xMidYMid meet" - JS 动态渲染时，
progress参数必须是 0–1 小数（后端返回 62 就得除以 100），否则stroke-dashoffset算错
真正麻烦的从来不是画出进度条，而是让它在表格各种缩放、滚动、深色模式下仍能被点中、读得懂、不变形 —— 这些细节不处理，用户第一次点不中就会放弃。
