设置显示:第一行的任何单元格都没有弄乱表布局 [英] Setting display:none to cell on first row messes up table layout

问题描述

我遇到以下麻烦的基于表格的示例网格布局: http://jsfiddle.net/ccfa6kvb/1/

I have the following example table-based grid layout that I'm having trouble with: http://jsfiddle.net/ccfa6kvb/1/

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

Basically my problem is that if I hide the gap cell on the first row, the rest of my gap column expands and messes up the layout. You can try this via the Toggle button I provided.

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

The cell is being initially generated with display:none, but has both width and min-width set to it, just as the other ones in my column.

我在调试器中看到的是，第三单元以某种方式代替了它，并在第二列上设置了要设置的宽度的镜头.

What I see in the debugger is that somehow the third cell takes its place and calls out the shots on what width to set on the second column.

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

Can someone please explain why this happens? Is there any way to avoid this?

推荐答案

display: none将完全从文档的渲染流中删除元素，从而使受该隐藏元素影响的相邻元素相应地重新布局.应用display: none时设置其他什么属性都没有关系，这就是为什么width和min-width值没有任何可见影响的原因.

display: none will take an element completely out of the document's render flow, causing adjacent elements affected by that hidden element to re-layout accordingly. It doesn't matter what other properties are set to when display: none is applied which is why your width and min-width values don't have any visible affect.

您可能希望使用visibility: hidden而不是display: none.这将使该元素不可见，但将其保留在文档布局中.

You probably want visibility: hidden instead of display: none. This will render the element invisible but keep its place within the document's layout.

这篇关于设置显示:第一行的任何单元格都没有弄乱表布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！