我正尝试在表中显示接收的一些详细信息。我希望table有一个最小高度来展示产品。所以如果只有一个产品,table的最后至少会有一些白色。另一方面,如果有5个或更多的产品,它不会有空白。我试过这个CSS:
table,td,tr{ min-height:300px; }
但这并不奏效。
jmo0nnb31#
td的height的工作原理与min-height类似:
td
height
min-height
td { height: 100px; }
代替
td { min-height: 100px; }
当内容不适合时,表格单元格将增大。https://jsfiddle.net/qz70zps4/
xcitsw882#
这不是一个很好的解决方案,但可以这样尝试:
<table> <tr> <td> <div>Lorem</div> </td> </tr> <tr> <td> <div>Ipsum</div> </td> </tr> </table>
并将DIV设置为最小高度:
div { min-height: 300px; }
kcrjzv8t3#
没有div的解决方案是使用一个伪元素,如::after到第一个td行与min-height。保存您的HTML干净。
div
::after
table tr td:first-child::after { content: ""; display: inline-block; vertical-align: top; min-height: 60px; }
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>
zrfyljdw5#
如果您设置style=“高度:100 px;在TD上如果TD具有使单元格增长超过该值的内容,则它将这样做而不需要TD上的最小高度。
2nc8po8w6#
表格和表格单元格不使用min-height属性,将其height设置为最小高度,因为如果内容拉伸表格,表格将扩展。
lp0sw83n7#
只有当你的td没有使用box-sizing: border-box时,表格单元格的高度设置才能正常工作。使用border-box,它会保持你设置的高度,内容会溢出。使用content-box或其他东西。我遇到这个问题是因为我使用了css-resetter。
box-sizing: border-box
content-box
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>
8条答案
按热度按时间jmo0nnb31#
td
的height
的工作原理与min-height
类似:代替
当内容不适合时,表格单元格将增大。
https://jsfiddle.net/qz70zps4/
xcitsw882#
这不是一个很好的解决方案,但可以这样尝试:
并将DIV设置为最小高度:
kcrjzv8t3#
没有
div
的解决方案是使用一个伪元素,如::after
到第一个td
行与min-height
。保存您的HTML干净。czfnxgou4#
在CSS 2.1中,未定义“min-height”和“max-height”对表格、内联表格、表格单元格、表格行和行组的影响。
因此,尝试将内容 Package 在div中,并为div指定
min-height
jsFiddle herezrfyljdw5#
如果您设置style=“高度:100 px;在TD上如果TD具有使单元格增长超过该值的内容,则它将这样做而不需要TD上的最小高度。
2nc8po8w6#
表格和表格单元格不使用
min-height
属性,将其height
设置为最小高度,因为如果内容拉伸表格,表格将扩展。lp0sw83n7#
只有当你的td没有使用
box-sizing: border-box
时,表格单元格的高度设置才能正常工作。使用border-box,它会保持你设置的高度,内容会溢出。使用content-box
或其他东西。我遇到这个问题是因为我使用了css-resetter。mctunoxg8#
只需在表格行的某个单元格中使用css条目min-height即可,也可以在旧的浏览器上使用。