Monday, July 11, 2011

Scroll bar in HTML Table using DIV and CSS without Javascript

This one was really really tricky. The internet is full with hundreds of different implementations, i dont know why. There are multiple Javascripts mentioned for this. Cross platform concerns are raised for this. Google Chrome not supports..., and Firefox not supports...I dont know what not are mentioned on the internet. A simple google search saying scrollable table in html also does not helps you out.

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 ;)

2 comments:

  1. Hi Can you tell me which tag to use for displaying other webpages in my webpage. i need it urgently

    ReplyDelete
  2. Hi Mr. Anonymous:
    Luckily I saw ur post just now. Your query was pretty much simple. What u can do is to use <frameset> tag. Other approach can be using <iframe> tag. The former one basically devides ur webpage into sets of webpages. And the latter one is more powerful. It can be used to directly display some new webpage at any provided location in ur webpage. The syntax is >

    <iframe src='your weblocation' height=... width=...></iframe>

    Simple.. Cheers;) Click on Ads if it pleases you sir!!

    ReplyDelete