table元素本身不支持background-color: transparent的穿透式透明，必须为每个td/th显式设置rgba背景色才能实现真正透明，且需注意border-collapse、层叠上下文及ie兼容性问题。
table 元素本身不支持 background-color: transparent 的“穿透式”透明
很多人试过直接给 <table> 写 <code>background-color: rgba(0,0,0,0)，发现没用——不是浏览器bug，是 HTML 表格渲染机制决定的：<table> 默认没有背景层（除非显式设了背景），它的“透明”实际取决于 <code><td> 和 <code><th> 的背景。真正要透，得控制单元格。
<h3>td/th 必须显式设置 background-color: rgba() 才生效</h3>
<p>RGBA 值只在元素有明确背景色时才起作用。如果 <code><td> 没设背景，默认继承自父级（通常是透明），但一旦父级（比如 <code><tbody>）或自身被其他样式覆盖（如 reset.css 里设了 <code>background: white），就会遮挡底层内容。
- ✅ 正确做法：给每个
<td> 和 <code><th> 单独加 <code>background-color: rgba(255, 255, 255, 0.85) - ❌ 错误写法：
table { background: rgba(0,0,0,0); }—— 这不会让单元格变透明 - ⚠️ 注意：IE9 及更早版本不支持 RGBA，会退化为全透明（即 fallback 为
transparent），但多数现代项目已无需兼容 - 解决方法一：改用
border-collapse: separate，再用border-spacing: 0模拟无缝效果 - 解决方法二：把边框也设为 rgba，例如
border: 1px solid rgba(0,0,0,0.1)，和背景协调 - 别漏掉
<thead> 和 <code><tfoot> 里的 <code><th>，它们同样需要 rgba 背景 <h3>透明表格遇上 z-index 或 position: relative 容易出层叠问题</h3> <p>如果表格放在一个 <code>position: relative的容器里，又用了z-index，而底层是带background-image的 div，你会发现透明区域有时显示为灰色或纯白——大概率是祖先元素触发了层叠上下文，且其背景未设透明。- 检查父容器是否意外设置了
background-color: #fff，哪怕 opacity 是 1，也会挡住底层 - 确保所有中间层（
<div>、<code><section></section>等）的背景都设为transparent或无定义 - rgba 本身不创建新层叠上下文，但
opacity 会，慎用 <code>opacity替代 rgba
实际最稳的写法就是老老实实给每个单元格加
background-color: rgba(...)，别指望 table 标签自己“透”。复杂点在于嵌套结构和层叠顺序，而不是透明本身。 - 检查父容器是否意外设置了
border-collapse: collapse 下边框会盖住透明背景
当使用 border-collapse: collapse 时，单元格边框会合并，而边框本身是有颜色和宽度的——它会覆盖在单元格的 rgba 背景之上，导致“半透明感”被破坏，尤其在浅色底图上显得突兀。
