table上直接设user-select:none无效，因该属性不继承，需对td/th等子元素显式设置；含input等表单控件时需用readonly等语义化方式禁选，并为iOS添加-webkit-touch-callout:none。
table 元素上直接写 user-select: none 为什么没用
因为 user-select 不继承，<table> 上设了，<code><td>、<code><th>、<code><span></span> 这些子元素默认仍是 text，双击或拖拽照样能选中。更常见的是：你给整个表格加了禁用，但里面嵌了个 <input type="text">，它依然可选——这不是 bug，是浏览器规范行为：user-select 对原生表单控件完全无效。
<td> 和 <code><th> 怎么批量禁选<p>最稳妥的做法是显式作用于单元格本身，而不是父级 <code><table>：<ul><li>用类选择器统一控制：<pre class="brush:php;toolbar:false;">.no-select-cell { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }</pre>然后在每个 <code><td> 和 <code><th> 上加 <code>class="no-select-cell"
table[no-select] td, table[no-select] th { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }再给表格加 no-select 属性：<table no-select>
<li>慎用通配符：<code>table * { user-select: none; } —— 它会误伤内部的 <input>、<button></button>，导致用户无法聚焦或点击
<input> 或 <textarea></textarea> 在表格里怎么真正禁选
在 <td> 里放表单控件时，<code>user-select: none 白写。唯一可靠路径是语义化控制：
- 加
readonly属性：<input readonly value="只读内容">，既阻止编辑，也自然失去文本选择焦点 - 配视觉降级：
background: #f5f5f5; cursor: default;，让用户一眼识别“不可操作” - 别用
pointer-events: none—— 它会同时禁掉聚焦、光标定位、键盘输入，体验比“可选”还差 - 如果必须保持可编辑（极少见），那就接受现实：
user-select对这类元素无解，现代浏览器没有标准 API 能只禁选不允编辑
iOS Safari 长按表格文字仍弹菜单怎么办
这是最容易被漏掉的一环。即使 CSS 已生效，iOS WebKit 在长按时仍大概率唤出“复制/查找”菜单。必须额外加：
.no-select-cell { -webkit-touch-callout: none; }
这条只对 Safari on iOS / iPadOS 有效，不影响其他浏览器。如果禁用后链接或按钮点不动了，记得给它们单独加 pointer-events: auto 覆盖。
真正麻烦的从来不是“怎么写”，而是“写在哪”和“写给谁”。表格结构嵌套深、子元素类型杂，user-select 得配合具体单元格内容类型、交互意图、以及是否含表单控件一起判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
