HTML表格中怎么禁止文本被选中-html教程-PHP中文网

user-select: none 加在上无效，因其不继承，必须显式设置和；表单控件如完全忽略该属性，需用 readonly 配合视觉降级；ios 长按菜单须额外加 -webkit-touch-callout: none。

html表格中怎么禁止文本被选中

user-select: none 单独写在 <table> 上基本没用——它不继承，<code><td> 和 <code><th> 依然可双击或拖拽选中。<h3>为什么 table 上设 user-select: none 没效果</h3> <p>浏览器规范规定 <code>user-select 不继承。你给 <table> 加了 <code>user-select: none，但它的子元素 <td>、<code><th> 默认仍是 <code>user-select: text，所以照样能选。更常见的是：表格里嵌了 <input type="text">，哪怕父级禁了，输入框文字仍可选——这不是 bug，是标准行为。

td/th 必须显式设置 user-select

最稳妥的做法是直接作用于单元格本身：

用类选择器统一控制：

.no-select-cell { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

然后每个 <td> 和 <code><th> 加 <code>class="no-select-cell"

用属性选择器一步到位：
```
table[no-select] td, table[no-select] th { /* 同上四行 */ }
```
再给表格加 no-select 属性：<table no-select> <li>别用 <code>table * { user-select: none; }——它会误伤内部的 <input>、<button></button>，导致无法聚焦或点击

表格里有 input 或 textarea 怎么办

user-select: none 对原生表单控件完全无效。唯一可靠路径是语义化控制：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

加 readonly 属性：<input readonly value="只读内容">，既阻止编辑，也自然失去文本选择焦点
配视觉降级：background: #f5f5f5; cursor: default;，让用户一眼识别“不可操作”
别用 pointer-events: none——它会同时禁掉聚焦、光标定位、键盘输入，体验比“可选”还差
如果必须保持可编辑（极少见），那就接受现实：user-select 对这类元素无解，现代浏览器没有标准 API 能只禁选不允编辑

iOS Safari 长按还是弹出菜单

这是最容易被漏掉的一环。即使 CSS 已生效，iOS WebKit 在长按时仍大概率唤出“复制/查找”菜单。必须额外加：

-webkit-touch-callout: none;——直接干掉那个气泡，仅对 Safari on iOS / iPadOS 有效
如果禁用后链接或按钮点不动了，记得给它们单独加 pointer-events: auto 覆盖
前缀顺序不能错：-webkit-user-select: none; 必须在 user-select: none; 之前，否则旧版 Chrome 可能不认

真正麻烦的从来不是“怎么写”，而是“写在哪”和“写给谁”。静态数值展示（比如状态码、ID、只读金额）可以放心加 user-select: none；但只要涉及用户交互意图（哪怕只是光标定位），就得换思路——用 readonly、视觉反馈、或干脆接受可选的事实。