应使用 rgba() 设置表格背景色透明度，而非 opacity；rgba() 仅影响背景色，文字、边框等内容保持原样清晰可读，避免可访问性问题与渲染异常。
直接用 opacity 会让文字也变淡，这不是你想要的
如果你给 <table> 加 <code>opacity: 0.7，整张表——包括文字、边框、单元格内容——都会一起变透明。实际项目中，多数人真正要的是“背景透一点，文字依然清晰”。这时候 opacity 就不是最优解，它会破坏可读性，尤其在浅色背景或复杂底图上。
常见错误现象：表格看起来发虚、文字糊成一片、用户反馈“看不清数字”。这往往不是字体问题，而是 opacity 过度影响了文本渲染。
-
opacity值为0.5时，文字对比度大幅下降，WCAG 可访问性检测可能直接不通过 - 如果表格嵌套在
position: relative或transform容器里，opacity还可能意外触发新层叠上下文，导致 z-index 行为异常 - 移动端 Safari 对低
opacity值下的文字抗锯齿处理较弱，小字号文字边缘容易出现毛边
用 rgba() 控制 background-color 才是正解
真正可控的做法，是只让表格的背景色（或单元格背景）带透明通道，其他一切保持原样。核心就是把 background-color 从十六进制或 rgb() 改成 rgba()。
使用场景：数据仪表盘里的悬浮表格、模态框内嵌表格、叠加在图片/渐变背景上的统计表。
- 给整个表格加半透底：
table { background-color: rgba(255, 255, 255, 0.85); } - 只让单元格背景透明：
td, th { background-color: rgba(255, 255, 255, 0.1); }（注意：必须确保父级<tr> 和 <code><tbody> 没有设置不透明背景，否则会被覆盖） <li>alpha 值为 <code>0等价于transparent，但rgba(255,255,255,0)更明确表达“白色底但完全透明”，避免被某些 CSS 预处理器误转 - 清除单元格间距：
table { border-spacing: 0; } - 关闭边框合并干扰：
table { border-collapse: separate; }（或保留collapse，但确保td边框设为none） - 干掉默认边框：
td, th { border: none; }或border-color: transparent; - 检查
<tr> 是否有 hover 背景色：<code>tr:hover { background-color: unset; }，否则悬停时透明度突变opacity和rgba()的性能差异很小，但逻辑边界必须分清两者在现代浏览器里渲染开销几乎一致，别被“rgba 更快”这类过时说法误导。真正关键的是语义和维护成本。
容易被忽略的点：
-
opacity是继承不可控的：父<div> 设了 <code>opacity: 0.9，里面所有表格都会跟着变淡，哪怕你单独给table写opacity: 1也没用 -
rgba()只作用于颜色属性，不影响布局、事件响应或子元素状态，调试时更容易定位问题源头 - 如果表格需要响应式缩放（如
transform: scale(0.85)），opacity可能因层叠上下文变化而表现不稳定，rgba()则始终只动背景色
-
别忘了清理表格默认样式，否则 rgba() 会失效
写了 background-color: rgba(0,0,0,0.05) 却看不到效果？大概率是浏览器默认样式在捣鬼。现代浏览器给 <table> 加了 <code>border-collapse: collapse 和隐式边框，这些“看不见的遮挡”会吃掉你的透明感。
必须显式重置：
