158

I am trying to show some details of a receive in a table.

I want that table to have a min height to show the products. So if there is only one product, the table would have at least some white space at the end. In the other hand if there are 5 or more products, it won't have that empty space.

I have tried this CSS:

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

But it is not working.

4

7 回答 7

486

height对于td像这样的作品min-height：

td {
  height: 100px;
}

代替

td {
  min-height: 100px;
}

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

https://jsfiddle.net/qz70zps4/

于 2014-08-15T15:11:53.457 回答
47

It's not a nice solution but try it like this:

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

and set the divs to the min-height:

div {
    min-height: 300px;
}

Hope this is what you want ...

于 2013-10-17T16:28:49.990 回答
35

没有的解决方案div是使用伪元素，例如::afterinto first tdin row with min-height。保存您的 HTML 干净。

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}
于 2016-05-09T12:07:06.730 回答
16

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

所以尝试将内容包装在 div 中，并在min-height 此处给 div 一个 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>
于 2013-10-17T16:31:07.963 回答
5

如果你设置 style="height:100px;" 在 td 上，如果 td 的内容使单元格增长得更多，则不需要 td 上的最小高度。

于 2015-07-15T21:59:37.523 回答
0

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

于 2018-09-26T20:29:15.357 回答
-1

只需将 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>
于 2017-03-21T01:41:31.930 回答