Syncing column width of between tables in two different frames, etc

Question

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

Answer 1

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());
            });

Answer 2

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!