Question

我知道这不应该是可能的，但也许还有一些新的怪癖......看看：

所以我使用display:table, table-cell and table-row。

如果它没有包含任何内容或者包含display:none元素，我之前能够获得一个零高度的行，但是在小提琴上你可以看到我试图隐藏第一行/单元格通过在所有元素上设置height:0和overflow:hidden，包括单元格内的.box，它确实无法正常工作。

请特别测试Safari，因为它比Firefox和Chrome有更多问题。

任何方法摆脱高度并隐藏内容？

编辑1：目前，我发现如果使用真正的html表格并将table-layout:fixed添加到并为其设置一些宽度< / strong>，至于官方规格（以及SO中的其他一些帖子），溢出属性确实有用。

虽然它似乎不起作用/适用于css-tables，但我需要css-tables。

编辑2：感谢@ zer00ne我更新了小提琴并发现它 - 通过将font-size：0设置为td和输入字段来工作。虽然，这不是我目前正在寻找的东西，因为我必须为场地位置设置动画并且必须完全正常运作。无论如何，这两个编辑对其他人有用。

Answer 1

在寻找解决方案大约一周后，答案是：

不，它仍然不可能。至少，它不可能以可靠和多样的方式。它只能在某种程度上限制元素或未来行动。

如果一个人不严格需要css-tables（在这个特定情况下像我一样），你可以用两种方式成功模仿相同的行为：

使用真实表格，将table-layout:fixed和宽度应用于表格（与单位无关，可以是百分比，例如）。而不仅仅是height:0/oveflow:hidden。
使用flexbox。这是css结构，在应用了正确的规则后，可以更好地逼近表格行为。

希望有所帮助

Answer 2

如果你只是在第一行“看不见”之后出局，你应该只能使用CSS：首字母类似：

/* Hide the first occurance of the 'tr' class */
.tr:first-of-type {
  display: none;
}

除此之外，我不确定为什么你不能做这样的事情，或者呢？（有点像你尝试过的方法）：

<强> HTML

<div class="tr hidden">
  <div class="td">
   My Content      
  </div>
</div>

<强> CSS

.hidden {
 display: none;
}

最后但并非最不重要的，我可以问你为什么用div而不是HTML's designated table创建一个“手工制作”的桌子？

Answer 3

您不应设置行的高度。只需在div内放置td标记，然后将您的内容直接放在div中，而不是直接放在td中。行的高度将等于其内容的高度。设置div元素的高度和溢出，并在td的顶部和底部填充中设置0。当然，您可以使用转换为div的高度。

$(function() {
	$('button').on('click', toggleColumn);
});

function toggleColumn() {
	$('div').toggleClass('rollup');
}

table {
  border-collapse: collapse;
}

td {
  padding-top: 0;
  padding-bottom: 0;
  border: 1px solid black;
}

div {
  background-color: yellow;
  height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: hidden;
  transition: 2s all;
}

div.rollup {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>toggle</button>
<table>
  <tr>
    <td><div>Column 1</div></td>
    <td><div>Column 2</div></td>
    <td><div>Column 3</div></td>
    <td><div>Column 4</div></td>
  </tr>
</table>

Answer 4

您可以使用以下css制作带有HTML表格的表格行动画：

tr.info td {
    transition: all 0.5s ease;
}
tr.info.hide td {
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
}

删除引起明显的“最小高度”的垂直填充（感谢Andrey Shaforostov）。设置不透明度0以使文本随着行的增长而显示-比使用字体大小更平滑。不需要内部div-只需在表行上添加/删除“隐藏”类。

有一个高度为0且溢出的表行的方法吗？

4 个答案: