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

klsxnrf1  于 2022-12-16  发布在  其他
关注(0)|答案(8)|浏览(360)

我正尝试在表中显示接收的一些详细信息。
我希望table有一个最小高度来展示产品。所以如果只有一个产品,table的最后至少会有一些白色。另一方面,如果有5个或更多的产品,它不会有空白。
我试过这个CSS:

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

但这并不奏效。

jmo0nnb3

jmo0nnb31#

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

td {
  height: 100px;
}

代替

td {
  min-height: 100px;
}

当内容不适合时,表格单元格将增大。
https://jsfiddle.net/qz70zps4/

xcitsw88

xcitsw882#

这不是一个很好的解决方案,但可以这样尝试:

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

并将DIV设置为最小高度:

div {
    min-height: 300px;
}
kcrjzv8t

kcrjzv8t3#

没有div的解决方案是使用一个伪元素,如::after到第一个td行与min-height。保存您的HTML干净。

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

czfnxgou4#

在CSS 2.1中,未定义“min-height”和“max-height”对表格、内联表格、表格单元格、表格行和行组的影响。
因此,尝试将内容 Package 在div中,并为div指定min-heightjsFiddle 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">
                    Good Morning !
                </div>
            </td>
        </tr>
    </tbody>
</table>
zrfyljdw

zrfyljdw5#

如果您设置style=“高度:100 px;在TD上如果TD具有使单元格增长超过该值的内容,则它将这样做而不需要TD上的最小高度。

2nc8po8w

2nc8po8w6#

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

lp0sw83n

lp0sw83n7#

只有当你的td没有使用box-sizing: border-box时,表格单元格的高度设置才能正常工作。使用border-box,它会保持你设置的高度,内容会溢出。使用content-box或其他东西。我遇到这个问题是因为我使用了css-resetter。

mctunoxg

mctunoxg8#

只需在表格行的某个单元格中使用css条目min-height即可,也可以在旧的浏览器上使用。

.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>

相关问题