使用JS取消隐藏后,带有colspan集的隐藏<td>不起作用

Question

我无法隐藏<td>了colspan,在2组的工作就已经没有隐藏与JS后.

从示例中可以看出,我试图隐藏2个td元素,并在colspan设置为2时取消隐藏另一个元素

我使用以下代码隐藏和取消隐藏元素:

function unhideColspan() {
document.getElementById("aa").style.display = 'none';
document.getElementById("bb").style.display = 'none';
document.getElementById("cc").style.display = 'block';
}

的jsfiddle

Answer 1

document.getElementById("cc").style.display = 'block';

应该

document.getElementById("cc").style.display = 'table-cell';

片段:

function unhideColspan() {
document.getElementById("aa").style.display = 'none';
document.getElementById("bb").style.display = 'none';
document.getElementById("cc").style.display = 'table-cell';
}

table td {
    border: 1px solid black;
    width: 50px;
    height: 5px;
    text-align: center;
    background-color: orange;
}
.a {
    height: 50px;
    background-color: white;
}
table {
    width: 610px;
    border: 1px solid red;
    /*table-layout:fixed;*/
}

<div>WITH COLSPAN APPLIED</div>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td class="a"><div></div></td>
        <td class="a" colspan="2"><div></div></td>
        <td class="a"><div></div></td>
    </tr>
</table>
</br>
</br>
<div>WITHOUT COLSPAN</div>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td class="a"><div></div></td>
        <td class="a"><div></div></td>
        <td class="a"><div></div></td>
        <td class="a">
            <div></div>
        </td>
    </tr>
</table>
</br>
</br>
<div>UNHIDE COLSPAN WITH JS</div>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td id="aa" class="a"><div>aa</div></td>
        <td id="bb" class="a"><div>bb</div></td>
        <td id="cc" class="a" colspan="2" style="display: none;"><div>cc</div></td>
        <td id="dd" class="a"><div>dd</div></td>
        <td id="ee" class="a"><div>ee</div></td>
    </tr>
</table>
</br>
<button onclick="unhideColspan()">OK</button>