Css table with fixed header and scrollable body - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Scroll

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

Description

Css table with fixed header and scrollable body

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, </title> 
  <style>
.fixed_headers {<!--   w  w  w .  ja  v a  2  s  .  com-->
   width:751px;
   table-layout:fixed;
   border-collapse:collapse;
}

.fixed_headers th {
   text-decoration:underline;
}

.fixed_headers th,
.fixed_headers td {
   padding:6px;
   text-align:left;
}

.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
   min-width:201px;
}

.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
   min-width:201px;
}

.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
   width:351px;
}

.fixed_headers thead {
   background-color:Chartreuse;
   color:yellow;
}

.fixed_headers thead tr {
   display:block;
   position:relative;
}

.fixed_headers tbody {
   display:block;
   overflow:auto;
   width:100%;
   height:301px;
}

.fixed_headers tbody tr:nth-child(even) {
   background-color:blue;
}

.old_ie_wrapper {
   height:301px;
   width:751px;
   overflow-x:hidden;
   overflow-y:auto;
}

.old_ie_wrapper tbody {
   height:auto;
}
</style> 
 </head> 
 <body translate="no"> 
  <!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped <div>. --> 
  <!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<<![endif]--> 
  <table class="fixed_headers"> 
   <thead> 
    <tr> 
     <th>Lore</th> 
     <th>Lorem</th> 
     <th>Lorem ipsum</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>Lorem</td> 
     <td>Lor</td> 
     <td>Lorem ipsum do</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lorem</td> 
     <td>Lorem ipsum dolo</td> 
    </tr> 
    <tr> 
     <td>Lorem</td> 
     <td>Lorem ipsum do</td> 
     <td>Lorem ipsum dolor sit amet,</td> 
    </tr> 
    <tr> 
     <td>Lorem </td> 
     <td>Lorem </td> 
     <td>Lorem ipsum dolor</td> 
    </tr> 
    <tr> 
     <td>Lorem </td> 
     <td>Lorem </td> 
     <td>Lorem ipsum dolor</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lorem</td> 
     <td>Lorem ipsum dolo</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lorem </td> 
     <td>Lorem ipsum dolo</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsu</td> 
     <td>Lor</td> 
     <td>Lorem ipsum do</td> 
    </tr> 
    <tr> 
     <td>Lorem </td> 
     <td>Lor</td> 
     <td>Lorem ipsum do</td> 
    </tr> 
    <tr> 
     <td>Lorem </td> 
     <td>Lor</td> 
     <td>Lorem ipsum do</td> 
    </tr> 
    <tr> 
     <td>Lorem ips</td> 
     <td>Lorem </td> 
     <td>Lorem ipsum dolor sit am</td> 
    </tr> 
    <tr> 
     <td>Lorem ip</td> 
     <td>Lorem</td> 
     <td>Lorem ipsum dolor sit a</td> 
    </tr> 
    <tr> 
     <td>Lorem </td> 
     <td>Lorem</td> 
     <td>Lorem ipsum dolo</td> 
    </tr> 
    <tr> 
     <td>Lorem ips</td> 
     <td>Lor</td> 
     <td>Lorem ipsum do</td> 
    </tr> 
    <tr> 
     <td>Lorem ips</td> 
     <td>Lore</td> 
     <td>Lorem ipsum dol</td> 
    </tr> 
    <tr> 
     <td>Lorem</td> 
     <td>Lorem </td> 
     <td>Lorem ipsum dolor</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum d</td> 
     <td>Lorem</td> 
     <td>Lorem ipsum dolo</td> 
    </tr> 
   </tbody> 
  </table> 
  <!--[if lte IE 9]>
</div>
<!--<<![endif]-->  
 </body>
</html>

Related Tutorials