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

【问题标题】：How to define minimum height for tbody in CSS如何在 CSS 中定义 tbody 的最小高度
【发布时间】：2013-03-20 09:06:54
【问题描述】：

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

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

但它不起作用。那么我应该怎么做才能做到这一点呢？

【问题讨论】：

显示更多代码，以便我们准确了解您希望实现的目标。表格可能不是您想要做的标记的正确选择。
如果没有内容，可能还需要添加width...
移除高度：500px;
我也有同样的问题。我的表在每一列都有过滤器。当只显示很少的记录时，我希望表格页脚保持在底部而不是上下跳跃。如果我将tbody 显示设置为“阻止”，则与列不对齐。

【解决方案1】：

为什么要这样做？

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

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

【讨论】：

对不起，我不知道 min-height 不能应用于 tbody 元素。如果tbody 中没有内容，我希望tbody 与thead 留出一些空间，我只是尝试添加display:block，这会使表格看起来非常难看。也许我应该改用div 元素。谢谢。
一张表可以有多个。我希望它们是最小高度。
用问题回答问题对任何人都没有帮助。

【解决方案2】：

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

CSS：

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

【讨论】：

【解决方案3】：

我们需要<tbody> 的最小高度，因为我们无法注入其他 HTML 元素（用户内容）。我找到了解决办法。

Height 适用于空表，但如果空表在 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>

铬 59：

Edge (14)、IE (11)、Firefox (54)：

通过以下方式修复此问题：

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

【讨论】：

【解决方案4】：

我认为这样就可以了，

table{height:500px !important;}

现在这个!important 将使它成为自愿的，它很容易被其他属性覆盖。

tbody 不带有 height 属性。

根据 CSS 的标准化，它仅包含 4 个属性 'align'、'char'、'charoff' 和 'valign'。

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

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

尝试并回复，我希望这样做:)

【讨论】：

【解决方案5】：

尝试跟随，因为 tbody 不能有最小高度，但仍然适用于数据表的高度

tbody{
    height:500px;
}

【讨论】：

【解决方案6】：

你需要添加 display: block;也是。

【讨论】：

【解决方案7】：

也许您使用的是 IE 5 或 6。为什么不只使用 height 来代替？尝试删除 min-height，因为在同一元素上设置 height 和 min-height 没有任何意义，因为您将得到一个固定的高度，而不是 min-height。

【讨论】：