background-size不能直接填满单元格宽度，因其默认按内容盒缩放，受padding影响易偏移，且百分比基于单元格自身尺寸计算；需配合background-origin: content-box、linear-gradient和动态background-size实现精准水平进度条。
为什么 background-size 不能直接填满单元格宽度
因为 background-size 默认作用于整个背景图区域，而表格单元格（<td>）的背景绘制范围受 background-clip 和盒模型影响。直接设 background-size: 100% 100% 时，它按单元格内容盒（content-box）缩放，但若单元格有 padding，进度条就会被“挤”偏；更常见的是，百分比值基于单元格自身宽高计算，而进度值（如 65%）需映射到固定方向（通常是水平），必须配合 background-position 控制起始点。
用 linear-gradient 搭配 background-size 实现可控进度条
纯色渐变比图片更轻量、可缩放，且能用 background-size 精确控制“已填充”宽度。关键在于把渐变方向设为水平，并让“填充段”宽度随进度动态变化：
-
background-image: linear-gradient(to right, #4CAF50, #4CAF50)—— 单色渐变，避免颜色过渡干扰视觉进度 -
background-size: 65% 100%—— 第一个值控制“色块宽度”，第二个值保持铺满高度 -
background-origin: content-box—— 确保尺寸计算从内容区开始，避开 padding 影响 -
background-repeat: no-repeat—— 防止重复出现多个条
示例：
td.progress {
background-image: linear-gradient(to right, #4CAF50, #4CAF50);
background-size: 65% 100%;
background-origin: content-box;
background-repeat: no-repeat;
background-position: left center;
padding: 8px;
}
动态更新 background-size 的 JS 方式（非内联 style）
直接改 style.backgroundSize 容易覆盖其他背景设置（如 background-image）。推荐用 CSS 自定义属性 + calc() 或 class 切换：
- 在
<style>中预设进度类：.p-30 { background-size: 30% 100%; }、.p-75 { background-size: 75% 100%; } - JS 中只切换 class：
cell.classList.replace(/p-\d+/g, 'p-82') - 或用自定义属性：
cell.style.setProperty('--progress', '82%')，CSS 中写background-size: var(--progress) 100%
注意：IE 不支持 background-origin: content-box，若需兼容，得用 box-sizing: border-box + 显式设置单元格 width，并确保 padding 不参与背景绘制。
立即学习“前端免费学习笔记（深入）”；
表格边框与背景进度条的叠加问题
当 table { border-collapse: collapse } 时，单元格 border 会叠加在背景之上，导致进度条边缘被遮挡或出现细缝。解决方式很直接：
- 去掉单元格 border，改用
table的border和border-spacing: 0 - 或给进度条加一层
box-shadow: inset 0 0 0 1px #e0e0e0模拟内边框，避开渲染层级冲突 - 若必须保留
border，设background-clip: padding-box（不是border-box），否则背景会画到边框区域外侧
真正麻烦的是 colspan/rowspan 单元格——它们的宽高不固定，background-size 百分比会失准。这种场景建议放弃纯 CSS 方案，改用 SVG 或伪元素定位。
