根本原因是border-collapse: separate下，td默认白色背景遮盖table背景图；解决关键是设td{background-color:transparent}且table{border-collapse:collapse}，边框加在td/th上以“浮”于背景图之上。
为什么边框会遮挡表格背景图
根本原因是 border-collapse: separate（默认值）下，table 和 td 的边框各自渲染，且 td 默认带白色背景，直接盖住 table 的背景图。哪怕你给 table 设了 background-image，只要任意一个 td 有非 transparent 的 background-color，整张图就看不见。
让边框“浮在”背景图上而不遮挡的关键操作
核心不是去掉边框，而是控制绘制层级和透明度：
- 必须显式设
td的background-color: transparent（不能省略，哪怕父级已设） -
table必须设border-collapse: collapse，否则边框位置不可控，容易割裂背景图 - 边框本身用
border属性加在td或th上，而不是只加在table上——这样边框才真正“浮”在单元格内容和背景图之上 - 若需外边框，给
table单独加border，但宽度建议 ≤1px，避免视觉压盖
示例片段：
table {
background-image: url("grid-bg.png");
background-repeat: repeat;
border-collapse: collapse;
}
th, td {
border: 1px solid rgba(0,0,0,0.2);
background-color: transparent;
padding: 8px;
}
给 td 加边框时背景图错位或被裁切怎么办
常见于 background-position 或 background-size 未适配盒模型：
立即学习“前端免费学习笔记（深入）”；
- 确保
td没有塌陷高度：加min-height: 24px或内容/内边距撑开 - 避免
border-collapse: collapse后忘记padding，否则背景图起点紧贴文字，看起来像“被边框挤偏” - 用
background-origin: padding-box（默认值），保证背景图从内边距起点开始绘制，不被边框干扰 - 若用
background-size: cover，仅适用于单个td，全表平铺请用repeat或repeat-x
想保留 td 白底又显示背景图？只能局部透出
纯白底和全表背景图天然冲突。可行折中方案只有：
- 把背景图设在
tr上，并设tr:nth-child(even) { background-color: #f9f9f9; }，再让td保持transparent——这样条纹底色 + 全表纹理可共存 - 用伪元素
::before在td内叠加背景图，z-index 高于文字但低于边框，但需额外定位控制 - 放弃全表背景图，改用小图标
background-image+background-position: right 8px center做装饰，边框完全不影响
真正要“边框不遮挡”，就得接受 td 背景透明；任何试图在不透明底色上硬叠全表背景图的写法，都会在某个环节漏图或错位。
