直接对 tr 设置 opacity 会导致整行内容（含文字、边框）变淡且兼容性差，正确做法是给 td/th 设置 rgba() 背景色，并确保 border-collapse: collapse 及父级无干扰背景。
tr 元素本身不支持直接设置 opacity 来实现“仅该行半透明而文字仍清晰”的效果——因为一旦设了 opacity，td、th 和文字都会变淡。真正常用且可控的方式，是给 tr 或其子元素的 background-color 用 rgba()。
为什么直接对 tr 设置 opacity 很容易出问题
浏览器渲染中，tr 是一个“表行生成盒”，它本身不接受背景色（除非显式声明 display: table-row），更不参与背景层叠；多数情况下，你看到的“行背景”其实是 td 或 th 的背景叠加结果。所以：
-
tr { opacity: 0.6 }在部分浏览器（尤其是旧版 Safari 或 IE）中可能完全无效或触发意外层叠上下文 - 即使生效，也会让整行文字、边框、内嵌图标全部变灰，可读性下降
- 如果
tr下有:hover或 JS 动态样式，opacity叠加后可能导致最终透明度远低于预期（比如父tr是 0.6，子td再设 0.9，实际是 0.54）
tr:hover 或指定类名时，用 background-color: rgba() 更可靠
真正起作用的是给 td 和 th 统一设背景色，而不是碰 tr 的透明度。示例场景：悬停高亮某行、标记禁用行、区分奇偶行：
.highlight-row td,
.highlight-row th {
background-color: rgba(255, 215, 0, 0.15); /* 淡金底，文字全黑不透明 */
}
<p>.disabled-row td,
.disabled-row th {
background-color: rgba(200, 200, 200, 0.3);
color: #888;
}</p><p>/<em> 避免被默认边框干扰 </em>/
table {
border-collapse: collapse;
}
td, th {
border: none;
}
</p>
- 必须确保父级
table和tbody没有设置background-color，否则会遮盖rgba()效果 - 若表格用了
border-spacing（默认为 2px），会导致td之间出现不可控白隙，透明感断裂；务必加border-collapse: collapse -
rgba()的 alpha 值建议控制在0.05–0.4区间：太低（如 0.02）几乎看不出变化，太高（如 0.7）会严重削弱背景图或父容器内容的可视性
需要动态控制某行透明度？优先操作 td 而非 tr
JS 操作时别写 row.style.opacity = '0.4'，改用 class 切换 + CSS 控制背景：
// ✅ 推荐：通过 class 控制
row.classList.add('faded-row');
<p>// ❌ 不推荐：直接改 opacity（尤其在循环中）
row.style.opacity = '0.4'; // 可能导致重排、文字模糊、事件响应异常
</p>
- 动态添加 class 后，CSS 规则匹配
.faded-row td即可批量处理单元格背景 - 若需兼容 IE9 以下（极少见），
rgba()失效时可 fallback 到半透明 PNG 背景图：background-image: url(data:image/png;base64,iVBOR...) - 注意：不要给
tr设background-color—— 它在大多数浏览器中会被忽略，徒增维护成本
真正要调某行“看起来透明”，核心就一条：放弃 tr 的 opacity，盯死 td/th 的 background-color 是否用了 rgba()，并确认 border-collapse 和父级背景是否干净。其他所有绕路写法，最后都卡在这三处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
