Hi Friends,
In the world of interactive and fast loading html web pages there has always been requirement of scrollable table with fixed header.
People who worked with ASP.NET datagrids and gridview have faced this problem at least once. Then there was no other option then to write your own custom control to achive this functionality.
Currently, in the era of ASP.NET MVC the problem didn't go away but we have things like JQuery and related plugins which can do these things for us with not much effort.
In one of my project we had to resolve the same problem on our own as we were not allowed to use any readymade third party JQuery plugin.
The requirement was to have
1. table with fixed header
2. table data can be scrolled both vertically and horizontally (as we have good number of columns to be shown in the table)
3. when scrolled vertically header should not move but when scroll horizontally table header should also be scrolling.
The very first idea is to have two tables
1. One with only header
2. Second one where data will be displayed.
But what about scrolling? so finally my associate Venkata Rami Reddy came up with following structure where we will use two different divs containing one table each.
<div>
<table>
<thead>
<tr>
//Header Columns will come here
</tr>
</thead>
</table>
</div>
<div>
<table>
<tbody>
<tr>
//Body Columns will come here
</tr>
</tbody>
</table>
</div>
Now we am going to make both the "div"s in a above structure as scrollable.
Scroll bars for the first div will not be visible also I will set overflow = hidden for first div, while for the second div both the scrollbars will be visible.
Column with for all the columns of both the tables should be fixed here.
Also Rami Reddy found this nice small piece of code which I used along with the above HTML and my CSS to achive implementation of 2 way scrollable table.
The final out come would look as following.
I have inlcuded all related files here.
I hope this would help the people trying to implement scorllable table.
Sincere thanks to Rami Reddy for the efforts he put in research and implementation of this which helped the project a lot. Keep up Venky!!!!!
Thanks and regards,
Chetan Ranpariya
In the world of interactive and fast loading html web pages there has always been requirement of scrollable table with fixed header.
People who worked with ASP.NET datagrids and gridview have faced this problem at least once. Then there was no other option then to write your own custom control to achive this functionality.
Currently, in the era of ASP.NET MVC the problem didn't go away but we have things like JQuery and related plugins which can do these things for us with not much effort.
In one of my project we had to resolve the same problem on our own as we were not allowed to use any readymade third party JQuery plugin.
The requirement was to have
1. table with fixed header
2. table data can be scrolled both vertically and horizontally (as we have good number of columns to be shown in the table)
3. when scrolled vertically header should not move but when scroll horizontally table header should also be scrolling.
The very first idea is to have two tables
1. One with only header
2. Second one where data will be displayed.
But what about scrolling? so finally my associate Venkata Rami Reddy came up with following structure where we will use two different divs containing one table each.
<div>
<table>
<thead>
<tr>
//Header Columns will come here
</tr>
</thead>
</table>
</div>
<div>
<table>
<tbody>
<tr>
//Body Columns will come here
</tr>
</tbody>
</table>
</div>
Now we am going to make both the "div"s in a above structure as scrollable.
Scroll bars for the first div will not be visible also I will set overflow = hidden for first div, while for the second div both the scrollbars will be visible.
Column with for all the columns of both the tables should be fixed here.
Also Rami Reddy found this nice small piece of code which I used along with the above HTML and my CSS to achive implementation of 2 way scrollable table.
The final out come would look as following.
I have inlcuded all related files here.
I hope this would help the people trying to implement scorllable table.
Sincere thanks to Rami Reddy for the efforts he put in research and implementation of this which helped the project a lot. Keep up Venky!!!!!
Thanks and regards,
Chetan Ranpariya
No comments:
Post a Comment