如何实现button内嵌套table元素文本可选中且不影响按钮功能

直接在<button>内嵌套<table>本身违反HTML内容模型规范：<button>只允许嵌套短语内容，<table>属于流内容，浏览器解析时会自动修正DOM结构，强制所有子元素继承按钮的原生交互（禁止文本选中、点击统一触发按钮事件），这类原生语义层面的绑定无法通过单纯重置CSS属性、覆盖onclick方法完全解决。

<button>
  My Button
  <table>
    <thead align="left">
    <tr>
      <th>Category</th>
      <th>Value</th>
    </tr>
    </thead>
    <tbody align="left">
    <tr>
      <td>Soil group</td>
      <td>Cambisols</td>
    </tr>
    </tbody>
  </table>
</button>

满足「table归属在button类下、点击按钮文本正常触发事件、table文本可选中」三个要求的稳定实现方案如下，无浏览器兼容问题：

• 用外层容器承载原button的所有自定义类名，保证table在该类的作用域下，满足类归属要求
• 实际触发点击的按钮元素只承载按钮文本，和table作为同层级节点放在外层容器内，从DOM结构上规避原生语义冲突
• 给table单独放开文本选中权限，阻断table区域的事件冒泡，避免误触发按钮点击事件

实现代码 #

DOM结构 #

<!-- 外层容器绑定原button的所有自定义类 -->
<div class="your-button-class">
  <button class="button-trigger">My Button</button>
  <table>
    <thead align="left">
    <tr>
      <th>Category</th>
      <th>Value</th>
    </tr>
    </thead>
    <tbody align="left">
    <tr>
      <td>Soil group</td>
      <td>Cambisols</td>
    </tr>
    </tbody>
  </table>
</div>

CSS样式 #

/* 原button的视觉样式全部迁移到外层容器，保持视觉效果和原有单按钮一致 */
.your-button-class {
  display: inline-block;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px 12px;
  background: #fff;
}

/* 重置内部按钮默认样式，和容器视觉融合 */
.button-trigger {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  margin-bottom: 8px;
  font-weight: 500;
}

/* 放开table的文本选中权限 */
table {
  user-select: text;
  -webkit-user-select: text;
  width: 100%;
  border-collapse: collapse;
  cursor: text;
}

table th, table td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

JS交互逻辑 #

// 按钮区域绑定原有点击逻辑
document.querySelector('.button-trigger').addEventListener('click', () => {
  // 此处替换为原按钮的点击业务逻辑
  console.log('按钮点击事件正常触发')
})

// 阻断table区域的点击、双击事件冒泡，避免误触发按钮事件，不影响文本选中
const table = document.querySelector('.your-button-class table')
table.addEventListener('click', e => e.stopPropagation())
table.addEventListener('dblclick', e => e.stopPropagation())

不推荐强行保留table作为button直接子节点的写法：即使通过JS阻断冒泡、加选中样式，由于浏览器解析阶段会自动重构非法嵌套的DOM，在Safari等webkit内核浏览器上仍会出现选中文本失效、点击偶发穿透的兼容问题。

内容的提问来源于stack exchange，提问作者Yes