對于我的主項(xiàng)目，我正試圖找到一種在JS中隱藏列的方法。以下功能:

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

效果很好，但是邊框不動(dòng)。問題是這樣的:變成

我如何避免這個(gè)問題？

編輯:這在Chrome和Edge上可以正常工作。這是火狐的bug嗎？

完整的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>

要解決這個(gè)問題，可以使用border-spacing屬性而不是border-collapse屬性。按如下方式修改您的CSS:

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

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