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

Question

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

我希望那张桌子有一个最小高度来展示产品.因此,如果只有一个产品,则表格最后至少会有一些空格.另一方面,如果有5个或更多的产品,它将不是那个空的空间.

我试过这个css:

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

但它没有用.

提前致谢.

Answer 1

height对于以下td工作min-height:

td {
  height: 100px;
}

代替

td {
  min-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设置为最小高度:

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

<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上达到最小高度.