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/ravi2808/fixed-table-rows-cols/master/js/fixed_table_rc.js"></script>
<table id="mytable">
<thead>
<tr>
<th style="width:40px;display:none">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 style="width:40px;display:none" >1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
<tr>
<td style="width:40px;display:none">1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
<tr>
<td style="width:40px;display:none">1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
<tr>
<td style="width:40px;display:none">1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
<tr>
<td style="width:40px;display:none">1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
</tbody>
</table>
CSS
body{
margin:10%;
}
JavaScript
$('#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'},
]
});