会撑开行高且易错位；需约束table、col、td、div四层尺寸，td设min-height或padding，div用height:16px和background-size替代width更稳妥，移动端加z-index和固定字号防重叠。
表格里直接塞<div>进度条会撑开行高吗？
<p>会，而且非常容易错位。表格单元格（<code><td>）默认是 <code>vertical-align: middle，但内部 <div> 如果没设固定高度或 <code>line-height，文字和条形会不对齐；更麻烦的是，如果条形 div 用了 height: 20px 但父 <td> 没设 <code>padding 或 min-height，Chrome 可能额外加 2–4px 行间距，导致上下留白不均。
- 必须给
<td> 加 <code>padding: 4px 8px 或 min-height: 28px（比条形高多 8px，留出文字呼吸空间）
<div> 进度条本身用 <code>height: 16px（别用 20px），配合 border-radius: 8px 视觉更紧凑
- 避免在
<td> 里写 <code>display: flex——IE 和旧版 Safari 下 flex 容器在 table-cell 中行为不可靠，宽度计算常出错
width 百分比在表格单元格里为什么经常不准？
因为 <td> 的宽度由表格布局算法决定，不是普通块级容器。你写 <code>style="width: 75%"，浏览器会按「相对于该列总宽」算，但列宽可能被其他行内容撑开，结果就是 75% 看起来像 60% 或 85%。
- 解决办法：给整列加
width 固定值，比如 <col style="width: 120px">，再让条形 div 的 width 相对这个固定宽计算
- 别依赖
table-layout: fixed 后的百分比——它只对第一行生效，后续行仍可能被内容顶开
- 数值来自后端时，用
Math.round(percent) 截断小数，避免 width: 99.999999999% 在某些缩放比例下渲染为 100% 或 99%
用背景色模拟进度条，background-size 能替代 width 吗？
可以，但只推荐用于静态展示或极简场景。用 background-image: linear-gradient(...) + background-size 控制填充比例，确实不用动 DOM，也不怕盒模型干扰，但它没法响应式动画，且 IE11 及更早版本不支持 background-size 百分比值。
- 正确写法：
background: linear-gradient(to right, #4a90e2, #4a90e2) no-repeat; background-size: 73% 100%; background-origin: content-box;
- 必须加
background-origin: content-box，否则 padding 会吃掉一部分渐变区
- 动画只能靠 JS 切换 class，不能用
transition: background-size——Safari 15.4 之前不支持该属性过渡
- 如果表格要打印，多数浏览器会忽略 background，所以关键数据（如 “73%” 文字）必须显式写出，不能只靠背景色暗示
移动端表格里进度条文字重叠怎么破？
小屏下单元格窄，百分比数字（比如 “92%”）和条形挤在一起，尤其当字体用了 rem 或系统默认缩放时，文字可能盖住条形右端。
- 给文字加
position: relative; z-index: 2;，条形 div 设 z-index: 1;，确保文字始终在上层
- 文字用
font-size: 12px 固定，别用 em 或 rem，避免被系统字体设置放大后溢出
- 加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 防止长文本撑破单元格，但注意 “92%” 不会触发省略，所以实际只需前两项
- 真遇到极端窄屏（比如 iPhone SE），建议用
@media (max-width: 375px) 把进度条隐藏，只留文字：“已完成 92%”
表格里放进度条不是不能做，而是得把每个容器层级的尺寸边界想清楚——<table>、<code><col>、<td>、<code><div>，四层宽度和高度都要显式约束，漏掉任何一层都可能在某个浏览器或缩放比例下崩掉。</div>
<td> 加 <code>padding: 4px 8px 或 min-height: 28px（比条形高多 8px，留出文字呼吸空间）
<div> 进度条本身用 <code>height: 16px（别用 20px），配合 border-radius: 8px 视觉更紧凑
<td> 里写 <code>display: flex——IE 和旧版 Safari 下 flex 容器在 table-cell 中行为不可靠，宽度计算常出错
width 百分比在表格单元格里为什么经常不准？
因为 <td> 的宽度由表格布局算法决定，不是普通块级容器。你写 <code>style="width: 75%"，浏览器会按「相对于该列总宽」算，但列宽可能被其他行内容撑开，结果就是 75% 看起来像 60% 或 85%。
- 解决办法：给整列加
width固定值，比如<col style="width: 120px">，再让条形div的width相对这个固定宽计算 - 别依赖
table-layout: fixed后的百分比——它只对第一行生效，后续行仍可能被内容顶开 - 数值来自后端时，用
Math.round(percent)截断小数，避免width: 99.999999999%在某些缩放比例下渲染为 100% 或 99%
用背景色模拟进度条，background-size 能替代 width 吗？
可以，但只推荐用于静态展示或极简场景。用 background-image: linear-gradient(...) + background-size 控制填充比例，确实不用动 DOM，也不怕盒模型干扰，但它没法响应式动画，且 IE11 及更早版本不支持 background-size 百分比值。
- 正确写法：
background: linear-gradient(to right, #4a90e2, #4a90e2) no-repeat; background-size: 73% 100%; background-origin: content-box; - 必须加
background-origin: content-box，否则 padding 会吃掉一部分渐变区 - 动画只能靠 JS 切换 class，不能用
transition: background-size——Safari 15.4 之前不支持该属性过渡 - 如果表格要打印，多数浏览器会忽略 background，所以关键数据（如 “73%” 文字）必须显式写出，不能只靠背景色暗示
移动端表格里进度条文字重叠怎么破？
小屏下单元格窄，百分比数字（比如 “92%”）和条形挤在一起，尤其当字体用了 rem 或系统默认缩放时，文字可能盖住条形右端。
- 给文字加
position: relative; z-index: 2;，条形div设z-index: 1;，确保文字始终在上层 - 文字用
font-size: 12px固定，别用em或rem，避免被系统字体设置放大后溢出 - 加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止长文本撑破单元格，但注意 “92%” 不会触发省略，所以实际只需前两项 - 真遇到极端窄屏（比如 iPhone SE），建议用
@media (max-width: 375px)把进度条隐藏，只留文字：“已完成 92%”
<table>、<code><col>、<td>、<code><div>，四层宽度和高度都要显式约束，漏掉任何一层都可能在某个浏览器或缩放比例下崩掉。</div>
