aligning the columns of two tables

[Maim]

Hello, I'm trying to create a page where two tables exist and I'm trying to align the columns of the first table to that of the second table.

Why am I using two tables? The first table will contain a single row with titles for my columns. The 2nd table is within a div with overflow:scroll so as to create a scrollable environment in case there's lots of data to display.

I'm using some javascript to resize the columns from table 1 to the size of table 2

	var i; //index of grid
	var j; //index of row
	for( i = 1; i < 6; i++ )
	{
		for( j = 1; j < 13; j++ )
		{
			oData = document.getElementById( 'col' + i + '_' + j );
			oHead = document.getElementById( 'head' + i + '_' + j );
			if( !oHead )
				break;
			oHead.style.width = oData.clientWidth;
			oFoot = document.getElementById( 'foot' + i + '_' + j );
			if( oFoot )
			{
				oFoot.style.width = oData.clientWidth;
			}
		}
	}

if you try the above with two tables and place the function inside onload and onresize, you'll notice that the cells keep growing whenever the browser is resized.

I've heard css can be used to fix this but css is kinda new to me. Some help would be very appreciated... Thanks -----------------------------------
"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook

 

[tviman]

If your table tag contains something like width="100%" then the table size will move with the viewable screen area. Try specifying table and cell widths in pixels. There's always a better way...