table元素直接设background-repeat无效，主因是其默认尺寸塌陷（如height为auto且内容极少），导致背景渲染区域过小而无法显示平铺效果；需同时满足三条件：正确路径的background-image、显式声明background-repeat、以及table具备足够宽高（如width: 100%; min-height: 200px）。
table元素直接设background-repeat无效？
不是属性写错了，而是table默认是“包裹内容”的尺寸，没有显式宽高时，背景区域可能只有几像素高——background-repeat: repeat确实生效了，但你根本看不到平铺效果。
常见错误现象：写了background-image和background-repeat: repeat，刷新后只看到左上角一小块图，或完全空白。
- 先检查
table的computed height是否为auto且内容极少——这是最常被忽略的根源 -
border-collapse: collapse会压缩单元格间距，间接影响背景可见区域，但不解决塌陷问题 - 别指望
td或tr继承table的背景——它们默认是透明的，背景只渲染在table自身盒模型内
让table背景真正平铺的三步实操
必须同时满足：有图、有重复声明、有可铺的区域。缺一不可。
- 给
table加显式尺寸：width: 100%; min-height: 200px;（min-height比height更安全，防内容撑高后裁剪） - 显式写
background-repeat: repeat;——别依赖默认值，重置样式（如Normalize.css）可能已覆盖它 - 路径必须正确：
background-image: url('./textures/dot.png');（路径以CSS文件位置为基准，不是HTML）
示例代码：
table {
width: 100%;
min-height: 250px;
background-image: url('./img/tile-bg.png');
background-repeat: repeat;
background-position: top left;
margin: 0;
}
用tbody或tr替代table设背景更可控？
想让平铺只出现在数据行区域，而不是整个表格框架？那就别把背景挂在table上，改用tbody。
-
tbody天然有高度（由tr撑起），通常比table更可靠 - 但需注意：
tbody默认display: table-row-group，不能直接设min-height，得配合display: block（会破坏表格语义布局，慎用） - 更稳妥的做法：给
tr设background-image+background-repeat: repeat-x，实现横向条纹效果（适合做隔行纹理）
横向平铺单行的典型写法：
tr:nth-child(odd) {
background-image: url('./img/stripes.png');
background-repeat: repeat-x;
height: 40px; /* 确保高度固定，避免repeat-x只显示一条细线 */
}
为什么background-size: cover会关掉平铺？
写了background-size: cover还加background-repeat: repeat，结果图只显示一张——这不是bug，是规范行为。
W3C明确：当background-size为cover或contain时，background-repeat自动失效，强制等效于no-repeat。
- 要平铺，就别用
cover/contain；要用缩放，就放弃平铺 - 真需要“缩放后平铺”，只能手动算：
background-size: 32px auto;（保持原图宽高比，宽度缩到32px，再repeat） - 小纹理图（如8×8像素点阵）直接用
background-size: auto最省事，浏览器按原始尺寸无缝铺
复杂点在于：表格结构本身会干扰背景定位。如果td有padding或border，background-origin默认是padding-box，图会从内边距起点开始铺——这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
