set element DIV or TABLE or other height to 100% of its container - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Table

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div Table

Description

set element DIV or TABLE or other height to 100% of its container

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
.outsidetable {<!-- w  w w  .j  a  va  2s . c om-->
   border-collapse:separate;
   border-style:hidden;
   empty-cells:show;
}

.spacercell {
   width:11px;
   height:11px;
   border-style:none;
}

.contentcell {
   border-style:outset;
   border-color:Chartreuse;
   border-width:3px;
   background-color:yellow;
}
</style> 
 </head> 
 <body> 
  <p> </p> 
  <table class="outsidetable"> 
   <tbody> 
    <tr> 
     <td class="contentcell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat</td> 
     <td class="spacercell"></td> 
     <td class="contentcell" rowspan="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat</td> 
    </tr> 
    <tr> 
     <td class="spacercell" colspan="3"></td> 
    </tr> 
    <tr> 
     <td class="contentcell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat</td> 
     <td class="spacercell"></td> 
    </tr> 
   </tbody> 
  </table> 
  <p></p>  
 </body>
</html>

Related Tutorials