如何在CSS中定义tbody的最小高度

Question

我想在CSS中为tbody设置最小高度，即使tbody中没有<tr><td></td></tr>，这是我的代码：

tbody{
  height: 500px;
  min-height:500px;
}

但它不起作用。那么我该怎么做呢？

Answer 1

你为什么要这样做？

最小高度和高度适用于块级元素，而表不是块级元素。 将你的表包裹在div中（比如div.table-wrap）并将最小高度应用于该div。

如果您不希望表布局对您来说不重要，那么只需将display:block添加到tbody的CSS中。

Answer 2

希望这个演示对你有用......

的CSS：

  tbody{
     height: auto;
     min-height:200px;
     display:block
    }

Fiddle

Answer 3

我们需要<tbody>上的最小高度，因为我们无法注入其他HTML元素（用户内容）。我发现了一个问题。

高度适用于空表，但如果空表在Chrome（59）中有空tbody则不适用 - 它适用于Firefox和Egde。隐藏<tr>的其他案例也存在问题，请参阅JSFiddle了解所有案例。

CSS：

.test {
  border: 1px solid red;
  height: 60px;
}

HTML：

Empty table:
<table class=test>

</table>

Empty tbody:
<table class=test>
  <tbody></tbody>
</table>

Chrome 59：

Edge（14），IE（11），Firefox（54）：

修正了这个：

tbody:before {
  content: ''/* needed for chrome*/
}

请参阅updated JSFiddle

Answer 4

我认为这样做，

table{height:500px !important;}

现在这个!important会让它成为自愿的，它会被其他属性轻易覆盖。

tbody没有携带身高属性。

它只带有4个属性'align'，'char'，'charoff'和＆amp; 'valign'按照CSS的标准化。

这也适用于相同大小的单元格和剩余空间中添加的单元格间距。

tbody{
  height:500px;
  display:block; 
}

尝试并回复，我希望这样做：）

Answer 5

尝试跟随，因为 tbody 不能有 min-height 但仍然可以用于数据表的高度

tbody{
    height:500px;
}

Answer 6

你需要添加display：block;太

Answer 7

也许你正在使用IE 5或6.为什么不只使用高度？尝试去除最小高度，因为在同一个元素上设置高度和最小高度是没有意义的，因为你得到的只是一个固定的高度，而不是最小高度。