如何在单击按钮后调整 HTML 中的表格大小？

Question

我有一个表格，只需单击“Ocultar Informacao Adicional”按钮即可隐藏一些内容，但是当我隐藏这些标签、文本字段等时，我无法调整表格的大小，并且它会保留一个巨大的空白空间。

我尝试过 height:auto、height:100%、display: none 但这些似乎都不起作用

这是我的 HTML

                <table cellpadding="0" cellspacing="0" border="0" style="width: 980px; position: relative;" class="tableEdit">
            
                <thead>
                    <tr>
                        <th width="280px">Fases</th>
                    </tr>
                </thead>
                <tbody>
                    <tr wicket:id="tabelaFase">
                        <td>
                            <div class="tdContentInput">
                            
                                <div class="labelDesc" style="width: 280px; margin-top: 10px;">
                                    <label>Fase número : </label>
                                    <label wicket:id="nome" class="bold"></label>
                                </div>
                                    <div class="clearBoth labelAndValue width400">
                                    <label>Entrada em funcionamento do Estabelecimento</label>
                                    <div class="calendar">
                                        <input wicket:id="dataInicioFuncionamento" type="text" class="tdData"/>
                                    </div>
                                </div>
                                    <div class="groupButtons">
                                <input type="submit" value="Visualizar informação adicional" wicket:id="expandir"/>
                                <input type="submit" value="Ocultar informação adicional" wicket:id="ocultar"/>
                                
                            </div>
                                <div class="clearBoth labelAndValue width260">
                                    <label wicket:id="lblApPrgFunc">Aprovação do Programa Funcional</label>
                                    <div class="calendar">
                                        <input wicket:id="dataAprovFuncional" type="text" class="tdData"/>
                                    </div>
                                </div>
                                <div class="labelAndCheckBox na width130">
                                    <input wicket:id="naAprovFuncionalcb" type="checkbox"/>
                                    <label wicket:id="lblnaApPrgFunc">Não Disponível</label>
                                </div>
                                <div class="clearBoth labelAndValue width260">
                                    <label wicket:id="lblAncConProj">Anúncio do concurso para o projeto</label>
                                    <div class="calendar">
                                        <input wicket:id="dataConcursoProjeto" type="text" class="tdData"/>
                                    </div>
                                </div>
                                <div class="labelAndCheckBox na width130">
                                    <input wicket:id="naConcursoProjetocb" type="checkbox"/>
                                    <label wicket:id="lblnaAncConProj">Não Disponível</label>
                                </div>
                                <div class="clearBoth labelAndValue width260">
                                    <label wicket:id="lblAdjProj">Adjudicação do projeto</label>
                                    <div class="calendar">
                                        <input wicket:id="dataAdjudicacaoProjeto" type="text" class="tdData"/>
                                    </div>
                                </div>
                            <div class="labelAndCheckBox na width130">
                                    <input wicket:id="naAdjudicacaoProjetocb" type="checkbox" />
                                    <label wicket:id="lblnaAdjProj">Não Disponível</label>
                                </div>
                                <div class="clearBoth labelAndValue width260">
                                    <label wicket:id="lblAproProj">Aprovação do projeto</label>
                                    <div class="calendar">
                                        <input wicket:id="dataAprovacaoProjeto" type="text" class="tdData"/>
                                    </div>
                                </div>
                                <div class="labelAndCheckBox na width130">
                                    <input wicket:id="naAprovacaoProjetocb" type="checkbox"/>
                                    <label wicket:id="lblnaAproProj">Não Disponível</label>
                                </div>
                                <div class="clearBoth labelAndValue width260">
                                    <label wicket:id="lblAncConEmp">Anúncio do concurso para a empreitada</label>
                                    <div class="calendar">
                                        <input wicket:id="dataConcursoConstrucao" type="text" class="tdData"/>
                                    </div>
                                </div>
                                <div class="labelAndCheckBox na width130">
                                    <input wicket:id="naConcursoConstrucaocb" type="checkbox"/>
                                    <label wicket:id="lblnaAncConEmp">Não Disponível</label>
                                </div>
                                <div class="clearBoth labelAndValue width260">
                                    <label wicket:id="lblAdjEmp">Adjudicação da empreitada</label>
                                    <div class="calendar">
                                        <input wicket:id="dataAdjudicacaoConst" type="text" class="tdData"/>
                                    </div>
                                </div>
                                <div class="labelAndCheckBox na width130">
                                    <input wicket:id="naAdjudicacaoConstcb" type="checkbox"/>
                                    <label wicket:id="lblnaAdjEmp">Não Disponível</label>
                                </div>
                                <div class="clearBoth labelAndValue width260">
                                    <label wicket:id="lblRcpProvObra">Recepção provisória da obra</label>
                                    <div class="calendar">
                                        <input wicket:id="dataRecepcaoProvisoria" type="text" class="tdData"/>
                                    </div>
                                </div>
                                <div class="labelAndCheckBox na width130">
                                    <input wicket:id="naRecepcaoProvisoriacb" type="checkbox"/>
                                    <label wicket:id="lblnaRcpProvObra">Não Disponível</label>
                                </div>
                                <div class="clearBoth labelAndValue width260">
                                    <label wicket:id="lblIngEdfHsp">Inauguração do Edifício Hospitalar</label>
                                    <div class="calendar">
                                        <input wicket:id="dataInauguracao" type="text" class="tdData"/>
                                    </div>
                                </div>
                                <div class="labelAndCheckBox na width130">
                                    <input wicket:id="naInauguracaocb" type="checkbox"/>
                                    <label wicket:id="lblnaIngEdfHsp">Não Disponível</label>
                                </div>
                                <div class="clearBoth labelAndValue width260">
                                    <label wicket:id="lblRcpDefObra">Recepção definitiva da obra</label>
                                    <div class="calendar">
                                        <input wicket:id="dataRecepcaoDefinitiva" type="text" class="tdData"/>
                                    </div>
                                </div>
                                <div class="labelAndCheckBox na width130">
                                    <input wicket:id="naRecepcaoDefinitivacb" type="checkbox"/>
                                    <label wicket:id="lblnaRcpDefObra">Não Disponível</label>
                                </div>
                            
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                </tfoot>
            </table>

Answer 1

单击按钮后调整 HTML 中表格大小的解决方案已准备就绪。这是例子：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Resize Table</title>
        <style>
            .hidden {
                display: none;
            }
        </style>
    </head>
    <body>
        <table id="myTable" style="width: 980px; border: 1px solid black;">
            <thead>
                <tr>
                    <th width="280px">Fases</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="tdContentInput">
                            <div class="labelDesc" style="width: 280px; margin-top: 10px;">
                                <label>Fase número :</label>
                                <label id="nome" class="bold"></label>
                            </div>
                            <div id="additionalInfo" class="clearBoth labelAndValue width400">
                                <label>Entrada em funcionamento do Estabelecimento</label>
                                <div class="calendar">
                                    <input id="dataInicioFuncionamento" type="text" class="tdData"/>
                                </div>
                            </div>
                            <div class="groupButtons">
                                <button onclick="toggleInfo()">Ocultar informação adicional</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    
        <script>
            function toggleInfo() {
                var info = document.getElementById('additionalInfo');
                if (info.classList.contains('hidden')) {
                    info.classList.remove('hidden');
                } else {
                    info.classList.add('hidden');
                }
            }
        </script>
    </body>

</html>

此示例使用 JavaScript 来切换隐藏类，控制附加信息的显示属性。这可确保表格根据内容可见性动态调整大小。