How do you keep two tables' column widths in sync while resizing?

Question

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.

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.

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.

Answer 1

This is a sample of the concept, using Jquery. (You can do it vanilla, but requires more code)

<table id="tb1" border="1">
        <tr>
            <td>Title 1</td>
            <td>Title 2</td>
            <td>Title 3</td>
            <td>Title 4</td>
        </tr>
    </table>

    <table id="tb2" border="1">
        <tr>
            <td>Content 00001</td>
            <td>Content 02</td>
            <td>Content 0000000000003</td>
            <td>Content 000000000000000000004</td>
        </tr>
    </table>

JS:

function SetSize() {
    var i = 0;
    $("#tb2 tr").first().find("td").each(function() {
        $($("#tb1 tr").first().find("td")[i]).width(
            $(this).width()
        );
        i++;
    });
}
$(window).resize(SetSize);
SetSize();

No "crazy javascript" :D
Here's a working fiddle, with a few css to make it look better: http://jsfiddle.net/5mfVT/