table 元素上直接设置 background-image 常不显示，因 td/th 默认白色背景会遮盖表格背景；解决方法是外包 div 容器或作用于 tbody/thead，并注意 background-size 和 repeat 的合理搭配。
background-image 直接写在 <table> 上基本没用，这不是你代码写错了，而是浏览器渲染逻辑决定的。
<h3>为什么 <code>table { background-image: url(...) } 常常不显示
因为 <table> 默认是透明容器，而它的子元素（<code><tr>、<code><td>）在未显式设置时，浏览器会按规范赋予默认白色背景 —— 这层白底直接盖住了表格本身的背景图。哪怕你只写了 <code>background-image，没碰 background-color，<td> 也照样“挡光”。
<ul><li>检查是否无意中给 <code><td> 或 <code><th> 设了 <code>background-color（哪怕是 #fff 或 white）
overflow: hidden 或 transform，否则可能裁掉背景渲染区域border-collapse: collapse，旧版 Chrome 可能对 <table> 背景渲染异常，可加 <code>background-clip: padding-box 补救
真正起作用的两种写法（推荐选第一种）
核心思路就一个：绕过 <td> 的遮挡，把背景挂到它管不到的地方。
<ul><li><strong>外包一层 <code><div>：给容器设 <code>background-image，再让 <table> 自身透明<br><pre class="brush:php;toolbar:false;"><div style="background-image: url('grid.png'); background-size: 20px 20px;">
<table style="background-color: transparent;"><tr>
<td>A</td>
<td>B</td>
</tr></table>
</div></pre>
<li><strong>作用于 <code><tbody> 或 <code><thead>：它们不自带背景，默认透出，适合局部水印或表头装饰<br><pre class="brush:php;toolbar:false;"></pre>
<table>
<thead style="background-image: url('watermark.png'); background-repeat: no-repeat; background-position: center;"><tr>
<th>Name</th>
<th>Score</th>
</tr></thead>
<tbody>...</tbody>
</table>
<h3>
<code>background-size 和 background-repeat 怎么选才不翻车
表格不是海报，背景图尺寸和重复方式直接影响文字可读性。
-
background-size: cover容易裁剪关键区域，尤其当表格高度动态变化时；contain又常留大片空白 —— 对表格更稳妥的是固定尺寸平铺，比如background-size: 16px 16px -
background-repeat: repeat是默认值，但小图平铺极易干扰文字识别；若只想要左上角一个 logo，必须写no-repeat并配background-position: top left - 避免用
background-attachment: fixed：表格滚动时，固定背景会和内容错位，视觉割裂感强
最麻烦的从来不是加背景图，而是加完之后发现某列文字看不清、某行背景被截断、或者换台设备就消失 —— 这些问题几乎都出在没处理好 <td> 的默认背景和容器层级关系上。</td>
