Make the table fixed in between the header and footer - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer

Description

Make the table fixed in between the header and footer

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body style="height:100%;width100%;padding:0;margin:0"> 
  <div style="position:fixed:top:0;width:100%;height:10%;background-color:red;">
    Lorem ip <!--from w w w  . j a va2 s  . co m-->
  </div> 
  <div style="position:fixed:top:10%;width:100%;height:80%;background-color:green;overflow:auto"> 
   <table> 
    <tbody> 
     <tr> 
      <td>Lorem ipsum do</td> 
     </tr> 
    </tbody> 
   </table> 
  </div> 
  <div style="position:fixed:top:90%;width:100%;height:10%;background-color:blue;">
    Lorem ip 
  </div>  
 </body>
</html>

Related Tutorials