单纯给 table 或 body 加 user-select: none 无法真正阻止表格内容被复制，因它仅禁鼠标拖选，不防 Ctrl+C、右键、双击选词，且对 input/textarea 无效；需显式设于 td/th 并补全前缀，input 类敏感数据须用 readonly 或 span 替代，copy 事件需局部监听，服务端校验不可少。
单纯给 table 或 body 加 user-select: none 无法真正阻止表格内容被复制——它只拦鼠标拖选，不拦 Ctrl+C、右键菜单、双击选词，更对 input 和 textarea 里的文字完全无效。
为什么 table 上设 user-select:none 大概率失效
表格里常混用可编辑元素（如 input、contenteditable 单元格）、默认可选文本（td、th），而 user-select 不继承，且浏览器对表单控件有强制行为覆盖：
-
user-select: none设在table上，子级td仍可被双击选中（Chrome 115+、Firefox 120+ 明确支持） -
input内容不受任何user-select影响，哪怕父级加了pointer-events: none也照样能聚焦、选中、复制 - 移动端 Safari 长按
td文字，仍可能弹出“复制”系统菜单，-webkit-user-select: none响应延迟或被忽略
真正起效的 CSS 组合写法（仅限静态文本）
若表格纯展示、无输入框，目标是让 td 和 th 内容不可拖选，必须显式作用于文本容器，并补全前缀：
.sensitive-table td,
.sensitive-table th {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 防移动端 Safari 长按唤出菜单 */
.sensitive-table td,
.sensitive-table th {
-webkit-touch-callout: none;
}注意：tr 或 table 上设无效；* { user-select: none } 会误锁所有表单，绝对不用。
立即学习“前端免费学习笔记（深入）”；
input/textarea 里的敏感数据怎么处理
CSS 对它们完全无效，硬加 user-select 是白费功夫。可行路径只有两条：
- 改用
readonly+ 视觉降级：给input加readonly属性，再配background: #f5f5f5; border: none;模拟只读文本，用户无法编辑，自然也失去选中焦点 - 用
span替代input：后端渲染时把敏感字段输出为<span class="no-select">xxx</span>，再套上前面的 CSS 规则 - 绝不能用
disabled：虽然禁选，但会丢失键盘可访问性，屏幕阅读器跳过，且提交时该字段值不被发送
copy 事件拦截必须配合，但别信“彻底防复制”
加了 CSS 还得监听 copy 事件，否则 Ctrl+A + Ctrl+C 照样能复制 DOM 中存在的文本：
document.addEventListener('copy', function(e) {
const target = e.target.closest('.sensitive-table');
if (target) e.preventDefault();
});关键点：
- 别监听全局
document的copy，否则影响页面其他正常区域 - 不要同时禁
contextmenu：禁右键会让键盘用户（Tab 导航）和屏幕阅读器使用者完全失去操作入口，可访问性违规 - 服务端必须校验：前端所有限制都可绕过，敏感字段的读取权限、导出权限、API 返回内容，必须由后端控制
最易被忽略的是：表格里嵌了富文本（比如 [contenteditable="true"]），它的选中逻辑独立于 CSS，需单独加 user-select: none 并测试 iOS 长按行为。
