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