make the html table header fixed - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Header

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

Description

make the html table header fixed

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dol</title> 
  <style>
h3 table.rg-table-header {
   position:fixed;
}

h3 table.rg-table-body {
   padding-top:2em;
}
</style> <!--from   w  w  w .j a va  2 s  .  c  o  m-->
 </head> 
 <body translate="no"> 
  <h3>Lorem ip 
   <div> 
    <div class="rg-container"> 
     <div class="rg-content"> 
      <table class="rg-table-header"> 
       <thead> 
        <tr> 
         <th class="text ">Lo</th> 
         <th class="text ">Lorem </th> 
         <th class="text ">Lorem ipsu</th> 
         <th class="text ">Lorem ipsu</th> 
         <th class="text ">Lorem i</th> 
         <th class="text ">Lorem i</th> 
        </tr> 
       </thead> 
      </table> 
      <table class="rg-table-body"> 
       <tbody> 
        <tr class=""> 
         <td class="text " data-title="id">Lo</td> 
         <td class="text " data-title="somcol">Lorem </td> 
         <td class="text " data-title="biggger id">Lorem ipsu</td> 
         <td class="text " data-title="another id">Lorem ipsu</td> 
         <td class="text " data-title="med col">Lorem i</td> 
         <td class="text " data-title="med col">Lorem i</td> 
         <td class="text " data-title="sheet">Lorem</td> 
         <td class="text " data-title="sheet">Lorem</td> 
         <td class="text " data-title="anotherbigcoloumn">Lorem ipsum dolor s</td> 
         <td class="text " data-title="small">Lorem</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
   </div> </h3>  
 </body>
</html>

Related Tutorials