Syncing Column Width Of Between Tables In Two Different Frames, Etc

For reasons which are somewhat unavoidable (lots of legacy code, compatibility, design needs) I have the following problem: I have two tables, one directly below the other, but

Solution 1:

First, set the t1's width to t2's width. Then, take every td from t1, and set its width matching the widths of t2's columns.

Try this proof of concept: http://jsfiddle.net/HqpGp/.

You will need jQuery, and modify it to work with frames, but i think it's a good start. I'm pretty sure the JS part could be written in a nicer way, though.

Hope it helps!

Solution 2:

I couldn't get the accepted answer to work directly, so I reworked it a bit, just in case it doesn't work for anyone else.

$('.table1 tr:eq(1) td').each(function (i) {
                var _this = $(this);
                $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width());
            });