colspan on cell do not work on collapse table when display none and again display: table-cell-CodePudding

Problem is when I click on the button then the cell I collapsed. That works. Then when I click one more time, then the row is colspan-1 in spite of colspan-3. What should I do to make row colspan 3 when click again. Look on border for cell a. This is live code 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 show this problem

CodePudding user response：

details.style.display = "table-cell";

needs to be

details.style.display = "table-row";