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

min-height table row
table min-height
tr height
bootstrap table row height
css table max-height
td line-height
td height 100
div min-height

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 be that empty space.

I have try with this css:

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

But it is not working.

Thanks in advance.

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

How to force min-height on table, 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  In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined. This hasn't changed in CSS3. improve this answer. answered Mar 31 '15 at 22:41. 52 silver badges. 77 bronze badges. Actually this has changed in CSS3 box model and the properties are applied to "all

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/

html - Can I use a min-height for table, tr or td?, The maximum height and minimum height of the table can be specified by applying width: 600px; height: 100%; max-height: 500px; min-height: 300px; } td, th  So, if you have a 50x50 icon in the table, the tr line-height will not make a row smaller than 50px (+ padding). Since you've already set the padding to 0 it must be something else, for example a large font-size inside td that is larger than your 14px.

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;
}

CSS Properties/Table Styles/maximum and minimum height of a , The height of an element can never be less than the value specified by the If you want to specify the exact size of an element, use the width and height properties. div> </td> </tr> </table> <div class="minHeight"> The min-height style  At the moment, this table has been implemented using table tags with the first row being done using tr and td tags. The real problem is Cells E, F, G and H. I thought it would be possible to have the rectangular area created by Cells E, F, G and H be implemented using two div tags, but that doesn't seem to be working.

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">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

min-height property CSS (Cascading Style Sheets), of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. Set the minimum height of a <p> element to 200 pixels: If the content is smaller than the minimum height, the minimum height will be applied. The numbers in the table specify the first browser version that fully supports the property. If the content is larger than the minimum height, the min-height property has no effect. Note: This prevents the value of the height property from becoming smaller than min-height. yes, see individual properties. Read about animatable Try it. JavaScript syntax: object .style.minHeight="400px" Try it. Browser Support.

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.

CSS min-height Property, table { min-height: 100%; }. html table {height: 100%;}. but, have never tested it. To do what you wanted you could have one table cell stretching to 100% height and then place a nested Now I put a better images to describe my situation. 100% height in a table cell is always a pain. Technically speaking a TD has no height (because that depends on its contents). What you are asking the browser to do is make the child 100% of its parent, which is 100% of its child, which is 100% of its parent You can see how that might be a problem.

Html table resize height and td height - HTML & CSS, min-height doesn't work on table elements, and that includes td . The reason is that a table cell will always stretch if necessary, so height  This way, the div 's height is that of the containing cell and the text cannot grow the div, keeping the cell/row the same height no matter what the window size is. improve this answer. edited Jun 21 '17 at 7:15. 23 silver badges. 34 bronze badges. answered Jan 19 '10 at 10:59. 443 silver badges. 431 bronze badges.

[Solved] In div min-height not take for display:table-cell .it only take , 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: ""  Specifies an abbreviated version of the content in a cell. Not supported in HTML5. Aligns the content in a cell. Not supported in HTML5. Categorizes cells. Not supported in HTML5. Specifies the background color of a cell. Not supported in HTML5. Aligns the content in a cell to a character. Not supported in HTML5.

Can I use a min-height for table, tr or td?, I'm trying to figure out how to get a table to adjust height of the table row min-​height but it seems to have absolutely no effect on either td or tr elements. So if you want all your table cells to be treated the same way, you will have to put some  First table is only 100 pixel width in any changes in browser window state, while other table will always stretch the full width of the window it is viewed in, that is the table automatically expands as the user changes the window size when you set width in % . Cell Width or Column width. You can set the width of a table cell using width attribute.

Comments
  • It would be helpful if you create a fiddle for us to try your code.
  • @SackySan you need to give the divs classes and then make this rule apply to that class only
  • In my Google Chrome (version 47.0.2526.106 m) running on a Windows 7, I found that setting the height of a td actually is processed as a padding top and bottom, which may introduce some layout problem as you think it's really a height space. It doesn't show as a style or as a computed style in the dev tools, but when you put your mouse over the inspected html element it's shown on the screen.
  • but the question was on min-height that does not work! what happens if you have a long text and needs another line with height it will get messed up
  • like @CMS said, he asked about min-height not height however as @frank explains below it behaves the same for table td. So maybe this needs a bit better explanation.
  • This is definitely a better answer than the accepted one.
  • This answer has just saved me potentially hours of work, should be the answer.