Copying Cell Widths to a Fixed-Position Clone Table

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.

Answer 2

I know this question is really old... but I stumbled upon it with a similar issue, figured I'd add an answer just for reference.

It took me about a week to realize that switching from getting the Element.offsetWidth() to getting the Element.getBoundingClientRect().width fixed my problem completely.

I'm not sure about jQuery... but I'm using plain JS to do the same thing here (clone my table header and copy the widths over) and I was having weird width issues that weren't making any sense... this fixed it completely.

Apparently Element.getBoundingClientRect().width will get the width to the neariest fraction, while Element.offsetWidth() will round it off to the nearest whole number.

You can view this answer for more information (they'll explain it better than I can right now): How do I retrieve an HTML element's actual width and height?

Answer 3

Try using offsetWidth, something like...

    // make each cell width in the header table, the same width as
    // the cells in the orginal table (header table has one row)  
    $headerTable.find('td, th').each(function(index)
    {
        var width = originalTable.rows[0].cells[index].offsetWidth
        this.width = width;
    });