一种使 table 行高度为 0 并隐藏溢出的方法？

Question

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

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

如果一行不包含任何内容或包含 display:none 元素，我以前能够将行设置为零高度，但在 fiddle 上你可以看到我已经尝试过通过在所有元素上设置 height:0 和 overflow:hidden 来隐藏第一个 row/cell，包括单元格内的 .box，但它确实不起作用。

请特别在 Safari 上测试，因为它比 Firefox 和 Chrome 问题多一些。

有什么办法去掉高度和隐藏内容？

编辑 1：目前，我发现 IF 使用 real html table 并向其添加 table-layout:fixed 除了为其设置一些宽度，至于官方规范（以及 SO 中的其他一些帖子），溢出属性 确实有效 .

虽然，它似乎没有 work/apply，css-tables，我需要 css-tables。

编辑 2：感谢@zer00ne，我更新了 fiddle 并发现它 -- 可以 -- 通过将字体大小：0 设置为 td 和输入字段来工作。虽然，这不是我目前正在寻找的东西，因为我必须为现场位置设置动画并且必须本身功能齐全。无论如何，这 2 个编辑可以对其他人有所帮助。

Answer 1

如果您只是在排完第一行 "invisible" 之后就出局了，您应该可以简单地使用 CSS 的 :first-of-type 像这样：

/* 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 创建 "handmade" table？

Answer 2

经过大约一周的寻找解决方案，答案是：

不行，还是不行。至少，不可能以可靠和通用的方式进行。只有在某种程度上限制元素或未来行动的方式才有可能。

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

使用真实的 tables，应用 table-layout:fixed 和 table 的宽度（单位无关紧要，可以是百分比，例如。 ).而不是像往常一样height:0/oveflow:hidden。
使用 flexbox。这是 css 构造，应用正确的规则，可以更好地近似 table 行为。

希望对您有所帮助

Answer 3

您不应该设置行高。只需将 div 标签放在每个 td 中，然后将您的内容放在 div 中，而不是直接放在 td 中。行的高度将等于其内容的高度。为 div 元素设置高度和溢出，并在 td 的顶部和底部填充中设置 0。当然你可以使用 transition 来达到 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 table 动画打开 table 行

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;
}

删除导致明显 "minimum height" 的垂直填充（感谢 Andrey Shaforostov）。将不透明度设置为 0 以使文本随着行的增长而显示 - 比使用字体大小更平滑的效果。不需要内部 div - 只需 add/remove table 行上的 "hide" class。

一种使 table 行高度为 0 并隐藏溢出的方法？

A way to have table-rows with height 0 and overflow hidden?

html

css

css-tables