Can I use the minimum height for a table, tr or td?

Question

I am trying to show some reception details in a table.

I want this table to have a minimum height for displaying products. Therefore, if there is only one product, at the end of the table there will be at least some free space. On the other hand, if there are 5 or more products, this will not be empty space.

I tried with this css:

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

But it does not work.

Thanks in advance.

Answer 1

This is not a good solution, but try like this:

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

and set divs to min-height:

 div { min-height: 300px; } 

Hope this is what you want ...

Answer 2

height for td works like min-height :

 td { height: 100px; } 

instead

 td { min-height: 100px; } 

Table cells will grow when the content is inappropriate.

https://jsfiddle.net/qz70zps4/

Answer 3

In a solution without a div , a pseudo-element of type ::after in the first td in the line with min-height . Save your HTML code.

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

Answer 4

In CSS 2.1, the effects of "min-height" and "max-height" on tables, inline tables, table cells, table rows, and row groups are undefined.

So try wrapping the contents in a div and give the div a 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

if you set style = "height: 100px;" on td, if td has content that enlarges the cell more, it will not require a minimum height on td.

Answer 6

Just use the css notation min-height for one of the cells of your table row. Works with older browsers.

 .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

Tables and cells of the table do not use the min-height , setting their height will be the minimum height, since the tables will expand if the contents stretch them.