折叠列后边框不适应

Question

对于我的主要项目，我试图找到一种方法来隐藏 JS 中的列。 以下function：

function hide() {
    const table = document.getElementById('test');
    const cols = table.getElementsByTagName('col');
    cols[1].style.visibility = "collapse";
}

效果很好，但边界不会移动。 这是问题所在：
成为

我怎样才能避免这个问题？

编辑：这在 Chrome 和 Edge 上按预期工作。 这是 Firefox 的错误吗？

完整的 html 是：

 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>

Answer 1

要解决此问题，您可以使用 border-spacing 属性而不是 border-collapse。 修改你的CSS如下：

<style>
table {
    border-spacing: 0;
}

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