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

【问题标题】：Cell height is something that ignored in webkit browsers单元格高度是 webkit 浏览器中忽略的东西
【发布时间】：2026-01-17 09:50:01
【问题描述】：

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

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

Here is我在说什么

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

【问题讨论】：

标签： html css webkit html-table

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

不要同时为TABLE 和TD 设置高度。选择一个。

【讨论】：

好吧，如果我因为某些原因只想在底部留出一些空间——比如这个))))
在这种情况下，将它包装在一个 DIV 中，然后让表格折叠到顶部。这让您在浏览器中获得一致的外观。
我已经完成了，只是在它发布了这个问题之后）））问题是关于如何在没有任何额外布局的情况下修复它。

【解决方案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;
}

【讨论】：

代码中还有其他内容吗？因为它在我所有的浏览器中都能正常工作。也许其他一些样式或元素正在干扰这些单元格的属性？！？！否则我会通过使用填充或 div 来解决问题。