How to define minimum height for tbody in CSS

Question

I want to set a minimum height for tbody in CSS, even if no <tr><td></td></tr> in tbody, here is my code:

tbody{
  height: 500px;
  min-height:500px;
}

but it doesn't work. so what should I do to achieve this?

Answer 1

Why you want to do this?

Min-height and height applies to block level elements and table isn't a block level element. Wrap your table inside a div (say div.table-wrap) and apply minimum height to that div.

If you don't want table layout isn't important to you, then just add display:block to the CSS of tbody.

Answer 2

Hope this demo will work for you...

Css:

  tbody{
     height: auto;
     min-height:200px;
     display:block
    }

Fiddle

Answer 3

We needed the min-height on the <tbody> as we could not inject other HTML elements (user content). I found a fix.

Height works for an empty table, but not if the empty table has an empty tbody in Chrome (59) - it works for Firefox and Egde. Also other cases hidden <tr> gave issues, see JSFiddle for all cases.

CSS:

.test {
  border: 1px solid red;
  height: 60px;
}

Html:

Empty table:
<table class=test>

</table>

Empty tbody:
<table class=test>
  <tbody></tbody>
</table>

Chrome 59:

Edge (14), IE (11), Firefox (54):

Fixed this with:

tbody:before {
  content: ''/* needed for chrome*/
}

See updated JSFiddle

Answer 4

I think this will do,

table{height:500px !important;}

now this !important will make it voluntary, it will be overridden easily by other attributes.

tbody does not carry the height property.

it carries only 4 properties 'align', 'char','charoff' & 'valign' as per standardization of CSS.

also this will work with cell of same size and cell spacing added in remaining space.

tbody{
  height:500px;
  display:block; 
}

Try and reply, I hope this will do :)

Answer 5

you need to add display: block; too.

Answer 6

Maybe you're using IE 5 or 6. Why not only use height instead? Try removing min-height because there is no point in setting height and min-height on the same element because all you will get is a fixed height and not min-height at all.