将显示:无设置为第一行的单元格会弄乱表格布局

Setting display:none to cell on first row messes up table layout

本文关键字：一行单元格会弄布局表格显示设置更新时间：2023-09-26

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

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

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

我在调试器中看到的是，不知何故，第三个单元格取代了它的位置，并调用了在第二列上设置的宽度的镜头。

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

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

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