El problema es cuando hago clic en el botón y luego colapsé la celda. Eso funciona. Luego, cuando hago clic una vez más, la fila es colspan-1 a pesar de colspan-3. ¿Qué debo hacer para hacer que la fila colspan 3 cuando haga clic nuevamente? Busque en el borde la celda a. Este es el código en vivo https://jsfiddle.net/dok6sxu4/8/

 const collapseDetailsTransaction = () => { const details = document.getElementById(`details`); const caret = document.getElementById(`collapse-button`); if (details.style.display === "none") { details.style.display = "table-cell"; caret.style.transform = "rotate(180deg)"; } else { details.style.display = "none"; caret.style.transform = "rotate(0deg)"; } };

 <table border="1"> <tr> <td>col1</td> <td>col2</td> <td> <button onclick="collapseDetailsTransaction()" id="collapse-button">klik</button> </td> </tr> <tr id="details"><td colspan="3">a</td></tr> </table>

gif muestra este problema