td colspan不稳定

Question

我这里有一张桌子，有一个td及其给定的colspan。我在表格中有一个列，其中包含一个链接，当单击该链接时，会在当前行下方展开一个面板。

<table class="table table-striped table-hover table-bordered">
    <thead class="thead-default">
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
            <th>Column D</th>
            <th>Column E</th>
            <th>Column F</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="http://www.example.com">ABCD</a>
            </td>
            <td>5</td>
            <td>200</td>
            <td>400</td>
            <td>testing</td>
            <td>
                <a data-toggle="collapse" data-target="#1" href="#" class="collapsed" aria-expanded="false">Show</a>
            </td>
        </tr>
        <tr><td id="1" class="collapse" colspan="6" style="height: 0px;">Lorem ipsum</td></tr>
    </tbody>
</table>

当我单击Show时，标识为1的单元格首先正确展开以跨越整个表格行，但随后立即缩小回第一个单元格的宽度。有谁知道如何保持单元格的宽度不变并跨越整行？提前谢谢！