不能直接给<table>加::before伪元素，因为<table>是替换元素且默认display: table，浏览器普遍不支持其伪元素渲染，强行添加会导致失效或布局错乱；必须挂载到显式设置position: relative的父容器上。
直接用 ::before 伪元素 + position: relative 容器是最稳妥的方案，不改 HTML 结构、不影响表格交互、兼容性好（IE11+），但必须注意定位上下文和 pointer-events 设置。
为什么不能直接给 <table> 加 ::before？
<table> 是替换元素，且默认 display: table，对伪元素支持极差——多数浏览器根本不渲染 table::before。强行加会失效或布局错乱。
- 必须把伪元素挂载到
<table>的父容器上，比如<div class="table-wrapper"> - 该父容器需显式设置
position: relative，否则::before会相对于body定位，水印飘走 - 若父容器有滚动（如
overflow-y: auto），水印会随内容滚动；如需固定视口水印，则用position: fixed并确保html和body高度为100%
::before 水印文字怎么写才清晰又不遮挡？
文字水印关键不是“大”，而是“可读性+穿透感”：倾斜角度、透明度、字体大小三者必须协同。
- 用
transform: rotate(-30deg)倾斜，别用图片——缩放失真、无法选中、加载延迟 -
color: rgba(0, 0, 0, 0.08)控制透出程度，不用opacity——它会让整个伪元素（含 transform）变淡，边缘发虚 - 字体大小推荐
font-size: 6vw或font-size: 4rem，避免固定px在高分屏上糊成一片 - 必须加
pointer-events: none，否则鼠标悬停/点击表格单元格时会被水印层拦截
图片水印用 background-image 还是 content？
图片水印统一走 background-image，content 只适合纯文字。伪元素的 content 无法加载外部图片资源，硬写 content: url(...) 在多数浏览器中被忽略。
立即学习“前端免费学习笔记（深入）”；
- 把水印图本身做成半透明 PNG（透明度 10%–20%），不要依赖 CSS
opacity，避免影响伪元素内所有内容 - 用
background-repeat: repeat平铺，配合background-size: 200px 150px控制密度 - 若需动态切换水印图（如不同权限用户看到不同 logo），通过 JS 修改父容器的
data-watermark-src属性，CSS 中用background-image: attr(data-watermark-src, url)读取（注意：Safari 对attr()支持有限，需 fallback）
打印时水印消失怎么办？
浏览器默认禁用伪元素和背景图打印，不是代码失效，是渲染策略问题。
- 必须显式声明
@media print规则，并重置关键样式 - 示例：
@media print { .table-wrapper::before { content: "CONFIDENTIAL"; color: rgba(0, 0, 0, 0.15) !important; transform: rotate(-30deg) !important; } } - 如果用了图片水印，
background-image在@media print中默认不显示，建议打印场景改用文字水印，或在 print 媒体查询中用background-image: url(...)显式启用
最易被忽略的是：水印层级和交互阻断。哪怕样式全对，漏掉 z-index: -1 或 pointer-events: none，表格就点不动、选不了——这不是效果问题，是功能故障。
