Tengo un elemento que tiene el siguiente aspecto ( https://jsfiddle.net/e176dosp/1/ ):
<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>Me gustaría poder tener el elemento de la tabla separado del botón, lo que significa que puedo hacer clic en el texto Mi botón para presionar el botón, pero también seleccionar el texto de la tabla a continuación, mientras que la tabla sigue siendo parte del clase de botón He intentado encontrar formas con javascript y css para "deshacer" la clase de botón en el elemento de la tabla, o para encontrar clases que anulen el comportamiento del botón al hacer clic, pero solo encontré soluciones sobre cómo eliminar las clases css que no están incorporadas, como el botón o mesa.
Por lo que deduzco, OP solicita que un botón (separado de la tabla) cuando se haga clic seleccione el texto de la tabla. Sospecho que el objetivo final es hacer que ese botón copie el texto de la tabla al portapapeles. Si es así, revise el siguiente ejemplo.
Detalles comentados en el ejemplo
/** * @desc Copy the text of a given tag to the clipboard. * @param {string<CSSString>/object<DOM>} selector - The * HTML element to extract text from * @param {boolean} pre - Option to copy text preformatted * false (@default) - text is partially formatted * true - text is preformatted */ function textCopy(selector, pre = false) { let target = typeof selector == "string" ? document.querySelector(selector) : selector; let text = !pre ? target.innerText : target.textContent; navigator.clipboard.writeText(''); navigator.clipboard.writeText(text.normalize()); } document.querySelector('button').onclick = function() { textCopy('table'); } table { width: 50%; text-align: left } td { border: 1px solid #000 } <button>Copy</button> <table> <thead> <tr> <th>Category</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Soil group</td> <td>Cambisols</td> </tr> </tbody> </table> <textarea rows='3' cols='30' placeholder='Paste Here'></textarea>Tal vez usando la propiedad user-select .
function fun1(e) { e.stopPropagation(); } function fun2(e) { e.stopPropagation(); console.log("My Button"); } button { padding: 1px 0; padding-bottom: 0; } .sel { background-color: red; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; padding: 0 3px; } <button onclick="fun2(event)"> My Button <table class="sel" onclick="fun1(event)"> <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>