Question

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

我希望该表具有最小高度来显示产品。因此，如果只有一个产品，则表格最后至少会有一些空格。另一方面，如果有5个或更多产品，则不会是那个空白区域。

我试过这个css：

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

但它没有用。

提前致谢。

Answer 1

height的{{1}}与td的作用相同：

min-height

而不是

td {
  height: 100px;
}

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

https://jsfiddle.net/qz70zps4/

Answer 2

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

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

并将div设置为min-height：

div {
    min-height: 300px;
}

希望这就是你想要的......

Answer 3

没有div的解决方案使用::after之类的伪元素进入td行的第一个min-height。保存您的HTML。

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

Answer 4

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

所以尝试将内容包装在div中，然后给div min-height jsFiddle here

<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">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 5

如果你设置style =“height：100px;”在td上，如果td的内容使得单元格增长得多，那么它将不需要在td上达到最小高度。

Answer 6

只需将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>

Answer 7

表和表单元格不使用min-height属性，将它们的height设置为最小高度，因为如果内容拉伸，表将扩展。

我可以使用最小高度表，tr或td吗？

7 个答案: