最可靠的做法是把背景设在 <tbody> 上，并确保它占满整个表格区域；需显式用 table > tbody 选择器命中，清空单元格背景，避免 display: block 破坏布局。
background-repeat 对 table 元素本身基本无效
直接给 <table> 设置 background-repeat 通常没效果，因为表格渲染时会将背景“拆解”到 <tbody>、<tr>、<td> 等子元素上，浏览器对 <table> 的背景合成行为不一致，尤其在 Chrome/Firefox 中常被忽略或重置。
真正起作用的是给 <tbody> 或 <tr> 或 <td> 设置背景，再配合 background-repeat —— 这才是可控的平铺起点。
想让整张表统一平铺背景图，该设在哪一级？
最可靠的做法是把背景设在 <tbody> 上，并确保它占满整个表格区域：
-
<tbody>必须显式存在（即使 HTML 中没写，浏览器也会自动插入，但 CSS 选择器需写table > tbody才能精准命中） - 给
<tbody>设置display: block会破坏表格布局，绝对不要这么做 - 需同时设置
background-size: auto（默认值即可），避免cover或contain覆盖掉平铺逻辑 - 若表格有
border-collapse: collapse，记得<tbody>的背景可能被<th>/<td>的背景遮盖，此时应清空单元格背景：td, th { background: transparent; }
示例：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
table > tbody {
background-image: url('grid-bg.png');
background-repeat: repeat;
}
td, th {
background: transparent;
border: 1px solid #ddd;
}
background-repeat: repeat-x / repeat-y 在表格里为什么看起来“断了”？
这是因为单个 <tr> 或 <td> 高度/宽度有限，repeat-x 只在该单元格内横向平铺，换行就重置；视觉上就成了“每行一段”，不是贯穿整表的条纹。
解决办法只有两个：
- 把背景设在
<tbody>上并用repeat-x—— 它会在 tbody 的完整宽度内连续平铺（前提是 tbody 没被内容撑出多余空白） - 改用伪元素模拟：给
<table>加position: relative，再用::before绝对定位覆盖全表区域，设置背景和repeat-x
后者更灵活，且避开表格渲染怪癖：
table {
position: relative;
}
table::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('line-h.png') repeat-x 0 50%;
z-index: -1;
}
IE8–11 和 Safari 对 table 背景平铺的兼容性陷阱
旧版 IE（尤其是 IE8/9）根本不支持 <tbody> 上的背景；Safari（≤15.4）在 border-collapse: collapse 下可能把 <tbody> 背景渲染成只覆盖第一行。
稳妥方案是降级到 <table> 自身 + ::before 伪元素（需注意 IE8 不支持伪元素，必须用额外 <div> 包裹）：
- 现代浏览器：用
table::before（如上） - 需要兼容 IE8–10：在
<table>外层加一层<div class="table-bg">，背景设在该 div 上，table 设为透明 - 所有场景下，避免依赖
<thead>或<tfoot>的背景 —— 它们的渲染优先级混乱，极易被截断
背景图尺寸建议用小而清晰的 tile（如 8×8 像素），避免因缩放或 DPR 导致平铺错位。
