javascript - 设置显示 :none to cell on first row messes up table layout

Question

我有以下基于表格的网格布局示例，但我遇到了问题: http://jsfiddle.net/ccfa6kvb/1/

基本上我的问题是，如果我隐藏第一行的间隙单元格，我的间隙列的其余部分会扩展并弄乱布局。您可以通过我提供的切换按钮进行尝试。

该单元格最初是使用 display:none 生成的，但同时设置了 width 和 min-width，就像我专栏中的其他人。

我在调试器中看到的是，第三个单元格不知何故占据了它的位置，并决定了在第二列上设置的宽度。

有人可以解释为什么会这样吗？有什么办法可以避免这种情况吗？

Answer 1

display: none 会将一个元素完全从文档的渲染流中取出，导致受该隐藏元素影响的相邻元素相应地重新布局。当应用 display: none 时设置什么其他属性并不重要，这就是为什么你的 width 和 min-width 值不没有任何明显的影响。

您可能需要 visibility: hidden 而不是 display: none。这将使该元素不可见，但会保留其在文档布局中的位置。