How to create table with fixed header using css and jquery | Sanwebcorner

How to create table with fixed header using css and jquery

This is one of the simple concept to fix the table header when scroll. This method is done by with the help of css and jquery. This type of fixed header helps the customers to view the data with header perfectly. Mostly this will used for large amount of data because when customer scrolling down they may forgot the particular field is related to which header so to solve this type of problems we should use the fixed header for table.

The example below shows the table with fixed header also available the demo page for live demo of this program. I hope this will very helpful.


Html code for Fixed header Table

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>How to create Table with fixed header on scroll</title>
  <meta name="viewport" content="initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <script src="js/fixedheader.js"></script>
      <link rel="stylesheet" href="css/my-style.css">
</head>
<body>
<table class="pink" align="center">
  <thead>
    <tr>
      <th>Student Name</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Student1</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student2</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student3</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student4</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student5</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student6</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student7</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student8</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
     <td>Student9</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student10</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student11</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student12</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student13</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student14</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student15</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student16</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student17</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student18</td>
      <td>28</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Student19</td>
      <td>28</td>
      <td>8000</td>
    </tr>
       <tr>
      <td>Student20</td>
      <td>28</td>
      <td>8000</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a href="http://www.sanwebcorner.com/">www.sanwebcorner.com</a>
</body>
</html>

Css  for Fixed header Table

.container
{
width:80%;
}
table{
  border-collapse:collapse;
  width:100%;
}
.pink{
  border:1px solid #E91E63;
}

.pink thead{
  background:#E91E63;
}

thead{
  color:white;
}

th,td{
  text-align:center;
  padding:5px 0;
}

tbody tr:nth-child(even){
  background:#ECF0F1;
}

tbody tr:hover{
background:#BDC3C7;
  color:#FFFFFF;
}

.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}

Javascript  for Fixed header Table

;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if(offset < tableOffsetTop || offset > tableOffsetBottom)
               $t_fixed.hide();
            else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});