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

Question

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

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

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

score 7 · Accepted Answer

你为什么要这样做？

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

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

score 4 · Accepted Answer

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

CSS：

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

score 2 · Accepted Answer

我们需要最小高度，<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>

铬 59：

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

解决了这个问题：

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

score 0 · Accepted Answer

我认为这会做，

table{height:500px !important;}

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

tbody 不带有 height 属性。

根据 CSS 的标准化，它只带有 4 个属性 'align'、'char'、'charoff' 和 'valign'。

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

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

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

score 0 · Accepted Answer

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

tbody{
    height:500px;
}

score -1 · Accepted Answer

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

score -1 · Accepted Answer

-1

您需要添加显示：块；也。

于 2013-03-20T09:11:05.790 回答

7 回答 7