Fixed Table Header And Scrolling Body
- by user2881191
can Anyone please help me with the example that is on site
'http://mkoryak.github.io/floatThead/examples/inner-scroll/'
How Can i Apply the Jquery to the below example.
please provide Me the Demo in JSFiddle.
I Want to Make My Table Header Fixed With Scrolling (both horizontal and vertical) Body.
If Possible I also need to make the last column Fixed as the Header.
Please Help Me Reageding the Issue.
I Have Been Stuck For a Week.
Below Is My test Code For which I need to apply the style as in the above link or any other better approach.
Css :
#table-container{
background-color :white;
overflow:auto;
position:absolute;
top : 0px;
bottom : 18px;
width : 100%;
z-index: 1;
}
Jsp :
<div id="table-container">
<table id="maintable" style="width: 100%">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
</div>
