Link to home
Start Free TrialLog in
Avatar of matiascx
matiascxFlag for China

asked on

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

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

ASKER CERTIFIED SOLUTION
Avatar of Russ Suter
Russ Suter

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of matiascx

ASKER

Exactly what i need.
Thank you~!