how to force table has a min-height even if no tr in the tbody?

matiascx
matiascx used Ask the Experts™
on
Hi, experts,
I have a requirement of css layout:
Even if no table data, we must make sure the table at least occupy some height place.
How to let that happen?
I have created one plunker, any help is appreciated, thanks!
http://plnkr.co/edit/OuicJDoWoWANNdCfKrD2?p=preview
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
      .box{
        height: 100px;
        width:  100px;
        background: blue;
      }  
      .noconent{
        height: 500px;
        background: red;
      }
    </style>

  </head>
  <body>
    <table>
      <thead>
        <tr>
          <td>col1</td>
          <td>col2</td>
          <td>col3</td>
        </tr>
      </thead>
      <tbody class="nocontent">
        &nbsp;
      </tbody>
    </table>
  </body>

</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Senior Software Developer
Commented:
Table layouts are a bit funky. The easiest way to ensure what you need is to enclose the entire table in a <div> element and set its min-width and min-height properties.

http://plnkr.co/edit/yiX1NIpnlCZAYSnlxcPp?p=preview
matiascx

Author

Commented:
Exactly what i need.
Thank you~!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial