HTML5已废弃table的background属性，必须用CSS background-image作用于table、tr或td元素；background-size: cover在动态尺寸表格中易变形；border-collapse下td背景图会错位，需改用border-spacing或整表背景定位。
table元素直接用background属性会失效
HTML5已废弃BACKGROUND这种内联属性，浏览器（包括Chrome 120+、Firefox 125+）遇到<table background="xxx.jpg">会忽略该属性，不渲染背景图，也不报错——你根本看不到任何效果，但控制台也不会提示问题。
这不是路径或大小的问题，是语法本身被移除。哪怕你把图片放在根目录、用绝对URL、甚至加了border和width，只要用的是BACKGROUND属性，就无效。
CSS background-image必须作用于table或td才生效
要让表格有背景图，必须用CSS的background-image，且目标必须是table、tr或td元素本身，不能只写在父容器上指望“继承”——背景图不继承，只作用于声明它的那个元素。
-
table { background-image: url("bg.jpg"); }→ 整个表格区域显示背景 -
td.special { background-image: url("cell-bg.png"); }→ 仅特定单元格有图 -
tr:nth-child(odd) { background-image: url("stripes.svg"); }→ 隔行背景，注意background-color会覆盖它，需设为transparent
常见错误：写.wrapper { background-image: url(...) }包着<table>，结果只有wrapper的padding区域有图，table内部仍是白底。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
background-size: cover在table上容易拉伸变形
表格行高由内容撑开，列宽由内容或width决定，不是固定尺寸容器。background-size: cover会强制等比缩放填满当前table元素的盒模型尺寸，但这个尺寸随内容动态变化，导致同一张图在不同数据状态下缩放比例突变，视觉跳动明显。
更稳妥的做法：
- 对固定尺寸表格（如
width: 800px; height: 400px;），可用cover或contain - 对自适应表格，优先用
background-size: 100% 100%拉伸填充（牺牲比例），或改用background-repeat: repeat配合小纹理图 - 若需保持比例又不想裁剪，用
background-size: auto+background-position: center，图像按原始尺寸居中，留白不管
td背景图与border-collapse冲突
当table设了border-collapse: collapse，相邻td的边框会合并，但背景图不会自动对齐——每个td独立渲染背景，图像原点都是各自左上角，导致拼接处出现错位或缝隙。
解决方式只有两个：
- 去掉
border-collapse，用border-spacing: 0替代，此时td背景可无缝衔接（前提是图本身带边缘对齐设计） - 放弃单个
td设图，改为给整个table设一张大图，再用background-position配合像素偏移手动对齐关键列位置（例如background-position: -120px 0）
别指望background-clip或box-shadow能修好这个缝——它们不解决背景定位的根本矛盾。
