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

Question

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

User · Answer

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  lt table cellspacing  quot 0 quot  cellpadding  quot 0 quot  border  quot 0 quot  style  quot width 300px quot  gt       lt tbody gt           lt tr gt               lt td gt                   lt div style  quot min-height  100px  background-color   ccc quot  gt                      Hello World                    lt  div gt               lt  td gt               lt td gt                   lt div style  quot min-height  100px  background-color   f00 quot  gt                      Good Morning                    lt  div gt               lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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      lt table width  100   cellspacing  0  class  htmlgrid-table  gt       lt tr id  tr 0  gt               lt td width  3   align  center  class  readOnlyCell rowNumberColumn  gt 1 lt  td gt               lt td align  left  width  40   id  td 0 0  class  readOnlyCell gContentSection  gt 411978430-Intimate Ruby Small lt  td gt

User · Answer

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

User · Answer

It s not a nice solution but try it like this    lt table gt       lt tr gt           lt td gt               lt div gt Lorem lt  div gt           lt  td gt       lt  tr gt       lt tr gt           lt td gt               lt div gt Ipsum lt  div gt           lt  td gt       lt  tr gt   lt  table gt    and set the divs to the min-height   div       min-height  300px      Hope this is what you want

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

Examples related to html

Examples related to css