css - HTML table scrolling vertical & horizontal

Question

I'm looking to create a table of fixed width and height that can scroll vertically and horizontally.

I'm looking for the first row to be the fixed header, but also the first column to be fixed and the other columns to be able to scroll to the right.

I can get the header working as such by something like this:

http://www.cssplay.co.uk/menu/tablescroll.html

..but how also could I get the columns scrolling with the first one remaining fixed?

Any ideas?

Answer 1

This would be somewhat easy considering you are working with a table with fixed proportions. Simply create a DIV inside the column you'd like to scroll vertically and give it the fixed dimensions of your liking and append to it an 'overflow-y:auto' attribute. The verflow-y attribute will make sure only to present a scrollbar if the content of the div exceeds viewable area. Example:

<style type="text/css">
.scrollable { width:300px; height:400px; overflow-y:auto; overflow-x:hidden; clip-rect:(0px, 300px, 400px, 0px); }
</style>
<table width="500" height="500" cellpadding="0" cellspacing="0" border="0">
    <tr height="100">
        <td colspan="2">Banner</td>
    </tr>
    <tr height="400" valign="top">
        <td width="200">Left Column</td>
        <td width="300"><div class="scrollable">Scrollable area<br><br><br><br><br><br><br><br><br><br><br>Scrollable area<br><br><br><br><br><br><br><br><br><br><br></div></td>
    </tr>
</table>