Scrolling part of a table

Question

I want the first column of the table to remain fixed and the rest of the column to scroll along the x axis. 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 does not work. How should I do it. Please, help.

Answer 1

Unfortunately, TBODY overflow does not work with IE8 (this is the latest available in WinXP, still quite common)

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

, , ...

, , , .

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