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

Hope this demo will work for you...

Css:

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

Fiddle

Answer 2

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