opacity是最直白的表格整体透明方案，取值0～1的小数，作用于整个表格及其后代；若仅需背景半透而文字清晰，则用rgba()设置background-color；需注意默认样式干扰、层叠上下文及兼容性问题。
直接用 opacity 设置表格整体透明度
想让整个表格（含文字、边框、单元格内容）一起变淡，opacity 是最直白的选择。它作用于整个 <table> 元素及其所有后代，取值 0～1，比如 opacity: 0.4 就是 40% 不透明。
常见错误是写成百分比形式，比如 opacity: 40%; —— 浏览器会忽略这条声明，表格看起来“没生效”。必须用小数。
- 内联写法：
<table style="opacity: 0.6"> - CSS 类写法：
.transparent-table { opacity: 0.6; } -
opacity: 0后表格不可见，但仍占文档流位置，且click等事件仍可触发（除非加pointer-events: none） - 父元素设了
opacity，子表格再设opacity: 1也回不到完全不透明——透明度会相乘（0.5 × 1 = 0.5）
rgba() 控制表格背景透明而不影响文字
如果只要背景半透、文字保持清晰锐利，opacity 就不合适了。这时该用 rgba() 改 background-color，只动颜色层，不动文字渲染树。
例如：background-color: rgba(255, 255, 255, 0.15); 表示极淡的白底，透出下层背景图或页面底色，但单元格里的数字、文字全都不受影响。
立即学习“前端免费学习笔记（深入）”；
- 别写成
rgba(255, 255, 255, 15)—— alpha 必须是 0～1 的小数，不是百分比整数 - 要作用在
<td>或<th>上才有效；只给<table>设background-color可能被默认边框或border-collapse行为覆盖 - IE8 不支持
rgba()，如需兼容，得用 PNG 透明背景图替代
表格里设透明容易被默认样式“吃掉”
写了 background-color: transparent 或 rgba(..., 0) 却看不到底层，大概率不是代码错，而是被浏览器默认样式挡住了。
表格有两层“隐形干扰”：一是 border-spacing 在 border-collapse: separate 模式下会生成不可见间隙；二是 <table>、<tr> 甚至 <tbody> 自带背景色，哪怕没显式声明，某些 UA 样式表也会塞一个白色。
- 强制清除间距：
table { border-collapse: collapse; border-spacing: 0; } - 逐层清空背景：
table, tbody, tr { background-color: transparent; } - 去掉干扰边框：
td, th { border: none; }或border-color: transparent; - 检查是否被更宽泛的选择器覆盖，比如全局重置规则
table td { background: #fff; }
为什么 opacity 在固定定位表格上看起来“没反应”？
给 position: fixed 或 position: absolute 的表格设 opacity 后没变化，往往不是属性失效，而是 z-index 层叠或遮挡问题。
一旦元素脱离文档流并创建新层叠上下文（opacity < 1 本身就会触发），它的绘制顺序就和普通流内元素不同。可能被其他同级元素盖住，或者因父容器 overflow: hidden 裁剪掉部分区域。
- 先确认该表格是否真在视觉最上层：临时加
z-index: 9999看是否浮现 - 检查父容器是否有
overflow: hidden或clip-path，可能导致半透明区域被裁切 - 避免在同一个元素上同时用
opacity和transform（如translateZ(0)），某些旧版 Chrome 会触发渲染异常
opacity 值更省时间。 
