scrolling a part of a table

Question

I want first column of a table to remain fixed and rest column to scroll in x direction.I have the following markUp:

<div id="outerDiv">
    <div id="innerDIv">
        <table>
           <tr><td>1</td><td>India</td><td>New Delhi</td></tr>
           <tr><td>2</td><td>USA</td><td>NewYork</td></tr>
           <tr><td>3</td><td>France</td><td>Paris</td></tr>
           <tr><td>4</td><td>Japan</td><td>Tokoyo</td></tr>
           <tr><td>5</td><td>China</td><td>Beijing</td></tr>
           <tr><td>6</td><td>UK</td><td>London</td></tr>
        </table>
    </div>
</div>

i tried :

 #outerDiv
{
width:130px;
overflow-x:scroll;
 overflow-y:hidden;
 margin-left:30px;
 position:relative;

}

#innerDIv
{
margin-left:-30px;
}

But it is not working. How should i do this.Please help.

Answer 1

Sadly the overflow in the TBODY doesn't work with IE8 (that is the most recent available in WinXP, still quite common)

I was asked to do this cross-browser (the table had a 100% width, that complicated things quite a lot), and I ended with a lot of javascript trying to align each column the two tables (one for the header, and one for the content).

I wrote trying because depending on the cells contents, It could fail or miserably ...

Sorry, no ready-to-run code, but the following is the code that aligned the nine columns in that project.

var tab1 = $('#table_top');
var tab2 = $('#table_bottom');

$(tab1).width( $(tab2).width()+'px' );
var offset = tab2.offset()
$(tab1).css({'left':offset.left+'px'});

var rows = $('#table_bottom tr:eq(0)');
var c0 = $( rows ).find("td:eq(0)").width();
var c1 = $( rows ).find("td:eq(1)").width();
var c2 = $( rows ).find("td:eq(2)").width();
var c3 = $( rows ).find("td:eq(3)").width();
var c4 = $( rows ).find("td:eq(4)").width();
var c5 = $( rows ).find("td:eq(5)").width();
var c6 = $( rows ).find("td:eq(6)").width();
var c7 = $( rows ).find("td:eq(7)").width();
var c8 = $( rows ).find("td:eq(8)").width();

rows = $('#table_top tr:eq(1)');
$( rows ).find("th:eq(0) div:eq(0)").width( c0+"px" );
$( rows ).find("th:eq(1) div:eq(0)").width( c1+"px" );
$( rows ).find("th:eq(2) div:eq(0)").width( c2+"px" );
$( rows ).find("th:eq(3) div:eq(0)").width( c3+"px" );
$( rows ).find("th:eq(4) div:eq(0)").width( c4+"px" );
$( rows ).find("th:eq(5) div:eq(0)").width( c5+"px" );
$( rows ).find("th:eq(6) div:eq(0)").width( c6+"px" );
$( rows ).find("th:eq(7) div:eq(0)").width( c7+"px" );
$( rows ).find("th:eq(8) div:eq(0)").width( c8+"px" );