点击按钮隐藏内容后如何调整HTML表格大小？

点击「隐藏附加信息」按钮后，页面中的部分标签、文本框已被隐藏，但表格无法自动调整高度，仍留有大量空白区域。尝试过设置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>

1. 统一包裹附加内容 #

将所有需要隐藏的附加字段（从"Aprovação do Programa Funcional"开始的所有元素）放入一个单独的容器中，方便统一控制显示/隐藏：

<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="additional-content">
  <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>

2. 确保隐藏时使用display:none #

点击「隐藏附加信息」按钮时，给.additional-content添加display:none样式（而非visibility:hidden，后者会保留元素占位）。如果使用Wicket框架，需确认按钮对应的逻辑是直接修改该容器的display属性。

3. 移除固定高度限制 #

检查并移除表格、单元格及内部容器的固定高度设置，让元素高度随内容自动调整：

.tableEdit {
  height: auto !important; /* 覆盖可能的内联或外部固定高度 */
}
.tableEdit td, .tdContentInput {
  height: auto;
  min-height: unset; /* 清除可能存在的最小高度限制 */
}

4. 修复浮动清除逻辑 #

确保clearBoth类的样式正确清除浮动，避免浮动元素导致容器高度计算错误：

.clearBoth::after {
  content: "";
  display: table;
  clear: both;
}

5. 验证Wicket渲染逻辑 #

确认Wicket在处理按钮点击时，没有给表格或单元格添加额外的固定高度样式。可以通过浏览器开发者工具（F12）检查隐藏状态下的元素样式，排查是否有未预期的CSS规则影响高度。

内容的提问来源于stack exchange，提问作者Diogo Cruz