Can I use a min-height for table, tr or td?

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.

height for td works like min-height:

td {
  height: 100px;
}

instead of

td {
  min-height: 100px;
}

Table cells will grow when the content does not fit.

https://jsfiddle.net/qz70zps4/

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

The solution without div is used a pseudo element like ::after into first td in row with min-height. Save your HTML clean.

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

> In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, > inline tables, table cells, table rows, and row groups is undefined.

So try wrapping the content 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">
                    Good Morning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

if you set style="height:100px;" on a td if the td has content that grows the cell more than that, it will do so no need for min height on a td.

Tables and table cells don't use the min-height property, setting their height will be the min-height as tables will expand if the content stretches them.

Simply use the css entry of min-height to one of the cells of your table row. Works on old browsers too.

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