Scrollable Table CSS Design that have fix/lock column?

Hi i want to create table that do scroll in horizontal ways but i want the 1st two column to be lock, as it wont be included when you scroll the table elements , one example of this is in Excel where you can lock a specific column and can scroll the other contents, thanks

 

You can do something like this with overflow: auto. Basically, it automatically adds a scrollbar to an element where needed. Try something like this:


#leftCol {
float: left;
width: 120px;
/* Or whatever you want */
}
#rightCol {
float: left;
width: 600px;
height: 500px;
overflow: auto;
}
#rightCol table {
width: 1200px;
}


And this HTML:


<div id="leftCol">
<!-- Left Column -->
</div>
<div id="rightCol">
<table>
</table>
</div>


You'll need to set both the height and width for #rightCol for this to work properly.

Is this what you needed?

 

thanks for the help this will do

 

Here is an old javascript by Richard Cornford that was posted in another forum that I was able to clean up. It provides locked column and row headers for a scrolling table. It works in FF, both mac and windows, and IE 6 and 7.