给 <table> 设 pointer-events: none 会“一刀切”禁用全部鼠标交互，因事件命中检测自上而下，子元素设 auto 无效；需改用 inert、JS 拦截或脱离 DOM 路径方案。
直接给 <table> 或 <tbody> 设 pointer-events: none 就能禁用全部鼠标交互，但会连带屏蔽内部所有按钮、输入框的点击和悬停——除非你额外恢复它们。
为什么给 <table> 加 pointer-events: none 会“一刀切”失效
浏览器事件命中检测是自上而下走 DOM 路径的。一旦 <table> 被设为 pointer-events: none，整棵子树（包括所有 <tr>、<td>、<input>）在捕获/目标阶段都会被跳过——哪怕你在某个 <button> 上写 pointer-events: auto，也完全无效。
- 这是规范行为，不是 bug；Chrome、Firefox、Safari（≥13.4）均一致
- 旧版 Safari（≤15.3）对子元素
auto的支持更弱，基本不可靠 - 如果表格里有
<input>或<textarea>，用户仍可能通过 Tab 键聚焦并键盘操作，但鼠标点不动
想禁用整表交互，但保留某些按钮可点怎么办
不能靠父容器设 none + 子元素设 auto 来“抢救”，得换路径：把需要保留交互的元素移出表格 DOM 路径，再用定位覆盖回去。
- 把按钮用
position: absolute提到<table>外层容器中，并确保z-index足够高 - 或用 React Portal / Vue Teleport 渲染到
<body>下，彻底脱离表格事件流 - 若必须保留在
<td>内，唯一可行的是不设pointer-events: none在<table>，改用 JS 拦截click、mousedown并event.preventDefault()，再手动放行目标按钮
比 pointer-events: none 更干净的替代方案：用 inert
inert 是语义级禁用，它让浏览器真正忽略该元素及其子树——不响应任何指针事件、不接受焦点、不被屏幕阅读器读取。但它只在现代浏览器中可用，且写法严格：
立即学习“前端免费学习笔记（深入）”；
- 必须写成
<table inert>或 JS 中el.inert = true，el.setAttribute('inert', '')无效 - IE 和 Safari ≤15.6 完全不支持，需用
pointer-events: none+tabindex="-1"+ ARIA 属性兜底 - 禁用后，内部
<input>不会出现在表单序列中，也不会被提交——这点比 CSS 方案更可靠
最常被忽略的一点：禁用交互不只是“不让点”。如果表格承载的是数据录入场景，仅用 pointer-events: none 会让键盘用户误以为还能 Tab 切换、回车提交，结果卡在不可操作的控件上。真要禁用，得同步处理可访问性状态和表单逻辑，不能只动样式。
