在纯 CSS 中折叠表格行的高度（不影响表格宽度）

Question

我有以下 HTML 与有效的 table 对齐表单：

<div id="one">
  <p>
    <label for="a">a</label> <input type="text" id="a">
  </p>
  <p class="h">
    <label for="b">bbbbbb</label> <input type="text" id="b">
  </p>
</div>

使用以下 CSS：

#one {
  display: table;
  width: auto;
}

p {
  display: table-row;
}

p label, p input {
  display: table-cell;
}

#one 是自动计算的宽度，labels 和 inputs 的宽度未知。我想要对齐表单的功能，但是将类 h 添加到他们的行中然后删除，为其他元素垂直腾出空间，但不改变 #one 的宽度，因为它应该位于其他元素旁边自动计算宽度。

CSS3 中的.h 定义会给我的“表格行” (p) 高度等于 0 还是在不改变其父级宽度的情况下以其他方式在视觉上删除它？如果需要，我可以更改 HTML，但我想找到一个不使用 JS 的解决方案。

visibility: hidden 不会垂直删除它，height: 0 不起作用（可能是因为它是table-row），而display: none 不起作用，因为它将有效宽度更改为 0。我想要我的 @ 987654337@ 保持相同的宽度。将display: block !important 与height: 0 结合使用部分可行，但会留下一个奇怪的垂直空间（并且block 不应该是table 的子级）。

我正在搜索的内容类似于this SO question，但我正在搜索纯 CSS 解决方案，并且不固定表格宽度。

你可以在这里玩它：JSFiddle。

Answer 1

好的，这可能是您的解决方案。请注意，它不一定是 flex - 它也适用于浮点数，但不适用于 display: table（老实说，我真的不明白在 2018 年使用它的意义）。

顺便说一句，我在.h 之后又添加了一个“行”，以便我们可以控制发生的情况。如果一切正常，我们应该会看到.h 垂直“折叠”，以便第一行和第三行接触。

#one {
  display: inline-block;
  background-color: #F0FFFF;
}

p {
  display: flex;
  justify-content: space-between;
  margin: 0; /* this is crucial because paragraphs have some margin set by default and I cannot know do you "reset" or "normalize" your css */
}

.h {
  transform: scaleY(0); /* this is something that is used actually quite often for animating dropdown menus */
  transform-origin: 50% 0; /* this line of code isn't contributing anythow NOW to your problem, but should you choose to animate "collapsing" the height of the row, it is setting its origin of transformation to the middle of the top border */
  height: 0;
}

<div id="one">
  <p>
    <label for="a">a</label> <input type="text" id="a">
  </p>
  <p class="h">
    <label for="b">bbbbbb</label> <input type="text" id="b">
  </p>
  <p>
    <label for="a">a</label> <input type="text" id="a">
  </p>
</div>

此外，您可以根据需要添加visibility: hidden，但这不会改变解决方案。希望对您有所帮助。

编辑：

在寻找解决方案的过程中，我偶然发现了这篇文章（尤其是 - this part）。尽管文章建议几乎不应该使用visibility: collapse，但我觉得值得一提，因为它回答了您最初的问题。而且，老实说，我刚刚在研究时了解到了可见性的“特征”。可能是因为没有人使用它：D。

original 代码的 CSS 只会再添加一条规则（但您也可以将它与 scaleY、height... 结合使用）：

#one {
  display: table;
  width: auto;
}

p {
  display: table-row;
}

p label, p input {
  display: table-cell;
}

.h {
  visibility: collapse;
}

进一步阅读： MDN: Visibility

(visibility: collapse) 对于行、列、列组和行组，行或列被隐藏并且它们本来占用的空间被移除（就像 display: none 被应用到表的列/行）。但是，仍会计算其他行和列的大小，就好像折叠的行或列中的单元格存在一样。此值允许从表中快速删除行或列，而无需强制重新计算整个表的宽度和高度。