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 other, but split between two frames (see the pseudo-example below my sig.). I need the column widths of these tables to synchronize exactly so that these two tables 'act' like one. The reason being to have a 'header' table which will not scroll above a 'data' table which can scroll.

Now there are a few obvious suggestions which don't (yet) work.

First, I have heard that by using CSS there is a way to put a scrollbar just on the table rows, not the table header, which is the intended effect here. Unfortunately, this is not a viable option due to the reasons mentioned above.

Second, percentage width formatting on the columns. Unfortunately the scrollbar will mess this up, and this solution also shares a problem with the next possible solution: pixel width formatting. Here, if there is column content that is extra wide these widths (px or %) will be overridden in one table but not the other, and one mismatching width will break -all- the vertical alignments. Apparently correcting this with a CSS 'max-width' does not seem to work.

The final possible solution is using some sort of Javascript and DOM to dynamically force the issue. Here forcing a min-width on each column and forcing bottom widths to override the top widths would be sufficient. Still, the ability to actually split a table in two while having them share the same column/row model would be pretty neat to. Hopefully this solution is feasable and not extremely complicated (pardon my present lack of knowledge RE Javascript/DOM).

Thanks,

Skolem

<!-- In frame 1 (top, non-scrolling): -->
<table id="t1" ...> (Just the header, really)
  <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
  </tr>
</table>

<!-- In frame 2 (bottom, scrolling): -->
<!-- table "t2" intended to have equal column widths -->
<table id="t2" ...> (Data below the header)
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
   <td>...</td><td>...</td><td>...</td><td>...</td>
  </tr>
</table>

Answer 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!

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