For my main project, I'm trying to find a way to hide a column in JS. The following function :
function hide() {
    const table = document.getElementById('test');
    const cols = table.getElementsByTagName('col');
    cols[1].style.visibility = "collapse";
}

works great, but the borders don't move. Here's the problem :
 becomes 
How can I avoid this issue ?
EDIT : This works as intended on Chrome and Edge. Is this a bug for Firefox?
Full html is:


function hide() {
    const table = document.getElementById('test');
    const cols = table.getElementsByTagName('col');
    cols[1].style.visibility = "collapse";
}
table, tr, th, td {
    border: 1px solid;
    border-collapse: collapse;
}
<table id="test">
    <colgroup>
        <col><col><col>
    </colgroup>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>un</td>
        <td>deux</td>
        <td>trois</td>
    </tr>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
</table>

<button onclick=hide()>Hide</button>




Border doesn't adapt after collapsing a column
To address this issue, you can use the border-spacing property instead of border-collapse. Modify your CSS as follows:
<style>
table {
    border-spacing: 0;
}

th, td {
    border: 1px solid;
    padding: 5px;
}
</style>

