Question

By generalizing the code in this SO answer, I’ve created a small jQuery plug-in which makes it easy to set up a scrolling header on any table – that is, when you scroll down such that the table header would normally be outside of the viewable window, a clone of the header becomes fixed to the top of the window so that you can see which columns are which. That’s all working fine, but the problem I’m having is that I can’t get the column widths to match up perfectly between the clone table and the original table.

I’ve created a jsFiddle which demonstrates the problem here. The gist of it is that I’m using the following loop to copy cell widths from the parent table to the clone table:

$("#tbl1").find('tr').first().children().each(function(i, e)
{
    $($("#tbl1_clone").find('tr').children()[i]).width($(e).width());
});

This is necessary because the clone table only consists of the parent table’s header; it has none of the content, therefore its column widths would be different than the parent table’s without this step. However, this loop doesn’t quite work properly. The cell widths in the cloned table are always off by a few pixels. This happens in both IE8 and Chrome (and presumably others, though I haven’t tested them.)

I’m at a complete loss as to how to correct this problem. Please check out the jsFiddle, as it explains the problem much better than I have.

It’s perhaps worth noting that the same code seems to work when the clone table’s position is not fixed. However, that’s of no use to me, since I need it to be fixed.

Answer 1

For some reason, the width attribute on your cloned table is throwing off the calculations. I’m not exactly sure why but if you use:

$("#tbl1_clone").removeAttr('style');

at the end of your jquery code like, here, it seems to work.