24 January 2008

Scrollable HTML table

A CSS tip I learned today: you can get a scrollable HTML table by using overflow in the associated CSS stylesheet.



<table style=' width:500px;border-collapse:collapse; font-family: sans-serif;border: 1px solid blue;' >
<thead><tr><th>ACC</th><th>Position</th></tr></thead>
<tbody style="height:105; overflow-y:auto;overflow-x:hidden;">
<tr><td>NP_001004053</td><td><a href="http://genome.ucsc.edu/cgi-bin/hgTracks?db=hg18&p
osition=chr22:14636331-14667937">chr22:14636331-14667937</a></td></tr>
<tr><td>NP_001005239</td><td><a href="http://genome.ucsc.edu/cgi-bin/hgTracks?db=hg18&p
osition=chr22:14828823-14829804">chr22:14828823-14829804</a></td></tr>
<tr><td>Q9UJS3</td><td><a href="http://genome.ucsc.edu/cgi-bin/hgTracks?db=hg18&positio
n=chr22:15451647-15453700">chr22:15451647-15453700</a></td></tr>
<tr><td>Q5GH77</td><td><a href="http://genome.ucsc.edu/cgi-bin/hgTracks?db=hg18&positio
n=chr22:15644305-15682584">chr22:15644305-15682584</a></td></tr>
<tr><td>Q2WGN9</td><td><a href="http://genome.ucsc.edu/cgi-bin/hgTracks?db=hg18&positio
n=chr22:15822826-15869112">chr22:15822826-15869112</a></td></tr>
...many rows...
</tbody>
</table>


the result:

shhh... doesn't display correctly within blogger

2 comments:

Anonymous said...

it doesn't work on IE6 :( firefox ok

Unknown said...

Dear Friend,
Higher version of scrollable table is present in s7u.blogspot.com. The table has fixed header, fixed footer, fixed right column, and fixed left column. And everything else is scrollable.

Thanks,
Sahil