div嵌套table无法完全折叠：table宽度仍保留的技术问题求助

问题原因 #

你当前用visibility: collapse来隐藏table，但这个属性的特性是隐藏元素但保留其原本占据的布局空间，所以即使table不可见，它的宽度依然会撑开外层的div。而visibility: visible只是恢复可见性，同样不会改变元素的布局占用。

解决方案 #

将控制可见性的属性从visibility换成display：

• 隐藏table时用display: none，这会让元素完全脱离文档流，不再占据任何布局空间
• 显示table时用display: table（还原table默认的display属性）

修改后的代码 #

JavaScript部分

function showmenu(btn) {
  switch (btn.value) {
    case "expand":
      btn.innerText = "x";
      btn.value = "hide";
      document.getElementById("show_lines").style.display = "table";
      break;
    case "hide":
      btn.innerText = "+";
      btn.value = "expand";
      document.getElementById("show_lines").style.display = "none";
      break;
  }
}

HTML部分

<div class="menu" style="position:absolute;z-index:10;border:1px solid black;">
  <button value="expand" onclick="showmenu(this)">+</button>
  <table id="show_lines" style="display:none;">
    <tr><td><input type="checkbox">Show lines</input></td></tr>
  </table>
</div>

注：已修正你HTML中未闭合的<td>标签。

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