title: How do you keep two tables' column widths in sync while resizing?
body: <p>I've looked around a bit and can't seem to find a decent solution, that doesn't require some crazy JavaScript, to the following problem.</p>
  
  <p><img src="https://i.imgur.com/tY6cU8f.gif" alt=""></p>
  
  <p>There are two separate tables in the example. The first one is just for the headers. The second is for the body. We need two tables because the requirement for this feature is that the body table be locally scrollable, meaning the headers need to remain visible as the table body scrolls. We cannot use any new fancy HTML 5 pivot tables because we have to support IE.</p>
  
  <p>Is there a way to accomplish this with pure CSS? It doesn't have to be perfect, just as long as it looks decent that's all I need.</p>