title: Syncing column width of between tables in two different frames, etc
body: <p><br> 
  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.</p>
  
  <p>Now there are a few obvious suggestions which don't (yet) work.  </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>Thanks,</p>
  
  <p>Skolem</p>
  
  <pre><code>&lt;!-- In frame 1 (top, non-scrolling): --&gt;
  &lt;table id="t1" ...&gt; (Just the header, really)
    &lt;tr&gt; 
      &lt;td&gt;Name&lt;/td&gt;&lt;td&gt;User Image&lt;/td&gt;&lt;td&gt;Email&lt;/td&gt;&lt;td&gt;Favorite Language&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;!-- In frame 2 (bottom, scrolling): --&gt;
  &lt;!-- table "t2" intended to have equal column widths --&gt;
  &lt;table id="t2" ...&gt; (Data below the header)
    &lt;tr&gt;
     &lt;!-- Lots of crazy stuff of wildly varying widths --&gt;
     &lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>