单纯设置user-select: none无法阻止表格复制，需css隔离（user-select+pointer-events）+js拦截copy事件+dom结构配合，三者协同才有效。
单纯给 <td> 或 <code><th> 加 <code>user-select: none 无法阻止表格整体被复制——用户只要在表格外拖选，照样能复制整行甚至整表。
CSS 的 user-select: none 只禁“选中”，不拦“复制”
很多开发者一上来就给操作列加类名，写上：
.disableSelectText {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
这确实能让鼠标在该单元格上拖不动、双击不选词，但问题在于：
- 用户把鼠标移到相邻可选单元格（比如编号列）再横向拖选，
<tr> 整行文字仍会被高亮并复制 <li>Ctrl+A 全选页面时，该单元格内容依然进剪贴板（<code>user-select不影响全选逻辑） - Safari 对
-webkit-user-select: none在表格嵌套场景下兼容性更弱，有时直接失效 - 给目标
<td> 或 <code><th> 设置 <code>user-select: none及全部前缀 - 同时加
pointer-events: none，防止鼠标事件穿透触发父级选中 - 但必须确保其父级
<tr> 或 <code><tbody> 没有全局 <code>user-select: none，否则会连带锁死其他列 - 如果表格含
<input>或按钮，别忘了给它们显式设回pointer-events: auto
真正起效的 CSS 组合：隔离容器 + 指针拦截
要让某列“视觉不可选、逻辑不可复制”，得把目标单元格从文本流中做轻量隔离：
示例：
table .action-cell {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: none;
}
table .action-cell input,
table .action-cell button {
pointer-events: auto;
}
JS 配合才能堵住 Ctrl+C 和右键复制
CSS 层面只能削弱选中体验，复制行为本身必须靠 JS 拦截。关键点是：不能监听整个 document，而要限定范围：
- 监听
copy事件，检查e.target是否落在表格内，且选区包含被禁单元格 - 用
window.getSelection()判断当前选中文本是否来自.action-cell内容 - 若匹配，调用
e.preventDefault()并可选地写入空字符串：navigator.clipboard.writeText('') - 注意：移动端 Safari 对
copy事件支持不稳定，部分机型完全不触发
简版逻辑：
document.addEventListener('copy', e => {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const cell = range.commonAncestorContainer.closest('.action-cell');
if (cell) e.preventDefault();
}
});
表格局部禁复制本质是“权衡控制粒度”
没有一行 CSS 能单独解决表格单元格级复制限制。你实际是在三个层面做协同控制：CSS 锁视觉选择、JS 拦复制动作、DOM 结构隔离交互区域。最容易被忽略的是——当用户用键盘 Shift+→ 扩展选区时，user-select: none 完全无效，此时唯一可靠防线只有 copy 事件里的 e.preventDefault() 和选区位置判断。别指望样式属性扛住所有路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
