我可以为 table、 tr 或 td 使用最小高度吗？

我试图在表中显示接收的一些细节。

我希望那张桌子有一个最小的高度来显示产品。因此，如果只有一个产品，那么表的末尾至少会有一些空白。另一方面，如果有5个或更多的产品，它不会有那么多的空间。

我试过这样的 CSS:

table,td,tr{
min-height:300px;
}

但是没有用。

142625 次浏览
小开
最佳答案

这不是一个很好的解决方案，但试试这样做:

<table>
<tr>
<td>
<div>Lorem</div>
</td>
</tr>
<tr>
<td>
<div>Ipsum</div>
</td>
</tr>
</table>

并将 div 设置为最小高度:

div {
min-height: 300px;
}

希望这是你想要的。

小开

在 CSS 2.1中，“ min-height”和“ max-height”对表的影响, 未定义内联表、表单元格、表行和行组。

因此，尝试将内容包装在一个 div 中，并给这个 div 一个 min-height 我是 JsFiddle

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
<tbody>
<tr>
<td>
<div style="min-height: 100px; background-color: #ccc">
Hello World !
</div>
</td>
<td>
<div style="min-height: 100px; background-color: #f00">
Good Morning !
</div>
</td>
</tr>
</tbody>
</table>
小开

td的 height工作原理与 min-height类似:

td {
height: 100px;
}

而不是

td {
min-height: 100px;
}

当内容不合适时，表单元格将增长。

Https://jsfiddle.net/qz70zps4/

小开

如果在 td 上设置 style = “ height: 100px;”如果 td 上的内容使单元格增长超过这个值，那么就不需要在 td 上设置 min height。

小开

没有 div的解决方案是使用一个类似于 ::after的伪元素与 min-height一起进入第一个 td行。将 HTML 保存为干净的。

table tr td:first-child::after {
content: "";
display: inline-block;
vertical-align: top;
min-height: 60px;
}
小开

只需将 min-height 的 css 条目用于表格行中的一个单元格。在老式浏览器上也能用。

.rowNumberColumn {
background-color: #e6e6e6;
min-height: 22;
}


<table width="100%" cellspacing="0" class="htmlgrid-table">
<tr id="tr_0">
<td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
<td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>
小开

表和表单元格不使用 min-height属性，将其 height设置为最小高度，因为如果内容拉伸了表，表就会展开。


提交答案