Fixed header scroll for table - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Scroll

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

Description

Fixed header scroll for table

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>CSS Only Fixed Table Headers</title> 
  <style>

.fixed_headers {<!--from   w w  w  .  j a va 2  s . c  om-->
   width: 750px;
   table-layout: fixed;
   border-collapse: collapse;
}
.fixed_headers th {
   text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
   padding: 5px;
   text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
   min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
   min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
   width: 350px;
}
.fixed_headers thead {
   background-color: #333;
   color: #FDFDFD;
}
.fixed_headers thead tr {
   display: block;
   position: relative;
}
.fixed_headers tbody {
   display: block;
   overflow: auto;
   width: 100%;
   height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
   background-color: red;
}
.old_ie_wrapper {
   height: 300px;
   width: 750px;
   overflow-x: hidden;
   overflow-y: auto;
}
.old_ie_wrapper tbody {
   height: auto;
}


      </style> 
 </head> 
 <body translate="no"> 
  <table class="fixed_headers"> 
   <thead> 
    <tr> 
     <th>Name</th> 
     <th>Color</th> 
     <th>Description</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>Apple</td> 
     <td>Red</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Pear</td> 
     <td>Green</td> 
     <td>These are green.</td> 
    </tr> 
    <tr> 
     <td>Grape</td> 
     <td>Purple / Green</td> 
     <td>These are purple and green.</td> 
    </tr> 
    <tr> 
     <td>Orange</td> 
     <td>Orange</td> 
     <td>These are orange.</td> 
    </tr> 
    <tr> 
     <td>Banana</td> 
     <td>Yellow</td> 
     <td>These are yellow.</td> 
    </tr> 
    <tr> 
     <td>Kiwi</td> 
     <td>Green</td> 
     <td>These are green.</td> 
    </tr> 
    <tr> 
     <td>Plum</td> 
     <td>Purple</td> 
     <td>These are Purple</td> 
    </tr> 
    <tr> 
     <td>Watermelon</td> 
     <td>Red</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Tomato</td> 
     <td>Red</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Cherry</td> 
     <td>Red</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Cantelope</td> 
     <td>Orange</td> 
     <td>These are orange inside.</td> 
    </tr> 
    <tr> 
     <td>Honeydew</td> 
     <td>Green</td> 
     <td>These are green inside.</td> 
    </tr> 
    <tr> 
     <td>Papaya</td> 
     <td>Green</td> 
     <td>These are green.</td> 
    </tr> 
    <tr> 
     <td>Raspberry</td> 
     <td>Red</td> 
     <td>These are red.</td> 
    </tr> 
    <tr> 
     <td>Blueberry</td> 
     <td>Blue</td> 
     <td>These are blue.</td> 
    </tr> 
    <tr> 
     <td>Mango</td> 
     <td>Orange</td> 
     <td>These are orange.</td> 
    </tr> 
    <tr> 
     <td>Passion Fruit</td> 
     <td>Green</td> 
     <td>These are green.</td> 
    </tr> 
   </tbody> 
  </table> 
 </body>
</html>

Related Tutorials