html - 单元格高度是 webkit 浏览器中忽略的东西

Question

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

我实际上已经设置td了高度。

这就是我所说的

问题是 - 哪个浏览器行为正确，即使 webkit 正确呈现，我怎样才能让它像在非 webkit 浏览器中一样呈现项目？

Answer 1

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

但是，在这种情况下，有更好的解决方案，例如填充等 :)

所以，让我们假设我们不知道行数，但我们知道表格的高度。如果我们能以某种方式为它保留位置，那么我们可以使这个表绝对定位，插入非常高的伪元素并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;
}