You can see instances of same problem replicated at hundreds of places some of which are mentioned below. Check out them before reading below. All are awesome workarounds, but none of them tackles the problem.
1) See long javascript implementation at Click here. But problem not solved.
2) See CSS+Javascript workaround at Click here
3) See a solution at Stackoverflow.com at Click here
As mentioned, all the above implementations are ingenious ones. But i dont know why so much pains have been taken up for a simple problem. this also kept me wandering from one solution to other when I wanted one for my own implementation in the facebook application created by Mohd Anwar Jamal Faiz. [Obviously me ;) ]
You can check out this implementation in live at Facebook Application ICEBREAKER. You can search for this App using your facebook account or may also click here Click for FaceBook App Icebreaker. Or if you want to open The icebreaker app direcly in you Facebook account, you may click here For Icebreaker in Facebook account directly
Obviously man! you have to be logged in your facebook account. In case you are not, it may ask you to login. The screen shot is attached here, where you can see the Table having scroll bars. You may click on the photo to enlarge it. [Also, you must click on a few Advertisements. it wont cost you anything, but will help me posting more valuable stuff without trying to find new means of livelihood. Hahaha ;)]
For all the evangelists and critiques, I have tested this implementation over IE6.0+ to IE 9 , FireFox, Google Chrome, PDAs OS and browsers, Blckberry, MacOSX. So I guess I have done a pretty much stable implementation. Hmmm... I think you are appreciating me. ;)
The solution is utterly butterly simple. The trick was straight but only a few can thing it that ways. The scroll attribute can be easily produced using a div element insite the row or column of the table. Undoubtedly, the div will have its inline CSS. you may obviously govern its property using external CSS, but that is obviously not the question.
For example if you have a table code as follows:
<table id="xyz">
<tbody>
<tr>
<td>
blah blah blah
</td>
</tr>
</tbody>
</table>
You must rewrite it as follows:
<table id="xyz">
<tbody>
<tr>
<td>
<div id="Anwar_jamal_table_div" style="overflow:auto; height:100px;width:200px;">
blah blah blah
</div>
</td>
</tr>
</tbody>
</table>
</blockquote>
You can adjust The height,Width As You like.
Time for me to end this post. Write to me or comment here, if something really messy you want to do and this post does not helps you. in all cases, click on a few of the Advertisements, as that is my bread and butter boss!!
Cheers ;)
