fixed header scrollable table

Using Github project

by raviteja

HTML

<link rel="stylesheet" href="https://rawgit.com/meetselva/fixed-table-rows-cols/master/css/fixed_table_rc.css">
<script src="https://rawgit.com/meetselva/fixed-table-rows-cols/master/js/fixed_table_rc.js"></script>
<table id="mytable">
  <thead>
    <tr>
      <th style="width:40px;">Head1</th>
      <th style="width:50px">Head2</th>
      <th style="width:60px">Head3</th>
      <th style="width:70px">Head4</th>
      <th style="width:80px">Head5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
       <tr>
      <td >1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
       <tr>
      <td >1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
       <tr>
      <td >1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
       <tr>
      <td >1</td>
      <td >2</td>
      <td >3</td>
      <td >4</td>
      <td >5</td>
    </tr>
  </tbody>
</table>

CSS

body{
  margin:10%;
}

JavaScript

var listWidth = $("#mytable tr th").map(function() {
  if ($(this).is(":visible")) {
    return this.style.width;
  }
}).get();
var viewData = {
  employees: []
};
for (var i = 0; i < listWidth.length; i++) {
  var jsonData = {
    width: listWidth[i].slice(0, -2),
    align: 'left'
  };
  viewData.employees.push(jsonData);

}

$('#mytable').fxdHdrCol({
	fixedCols:  0,
	width:     "100%",
	height:    100,
	colModal: [{width: 30, align: 'center'},
			   {width: 70, align: 'center'}, 
			   {width: 200, align: 'left'}, 
			   {width: 100, align: 'center'}, 
			   {width: 70, align: 'center'}, 
			   {width: 250, align: 'center'}
			  ]
});