单元格高度在webkit浏览器中被忽略

Question

我正在尝试使用tbody和thead高度，结果发现webkit与其他浏览器相反，并不像我预期的那样。

我实际上设置了td身高。

Here is我在说什么

问题是 - 哪个浏览器行为正确，即使webkit正确呈现，如何使其像非webkit浏览器一样呈现项？

Answer 1

如果你知道内部单元格的高度，那么你可以在表格之后插入一个伪元素：http://dabblet.com/gist/4332648

然而，在这种情况下，有更好的解决方案，如paddings等：）

所以，让我们假装我们不知道行数，但我们知道表的高度。如果我们可以以某种方式保留它的位置，那么我们可以使该表绝对定位，插入非常高的伪元素并使用clip来移除不需要的空间：http://dabblet.com/gist/4332690。如果我们需要边框，那么，另一个伪元素会有所帮助 - http://dabblet.com/gist/4332702。

我担心，只有黑客可以模仿你想要的东西而没有其他理想的解决方案。

Answer 2

请勿同时设置TABLE和TD的高度。选择一个。

Answer 3

对于你的细胞，使用min-height而不是height或两者。

table {
   border: 1px solid red;
   height: 200px;
   width: 400px;
}
thead  td {
   min-height: 10px;
}

tbody {

}

tbody td {
  background: pink;
  min-height: 10px;
}